Dlaczego warto resetować domyślne style CSS?

Nie od dziś wiadomo że przeglądarki mają zdefiniowane domyślne style dla elementów HTML i używają ich wtedy gdy my sami ich nie zdefiniujemy. Dla przykładu wystarczy utworzyć plik .html i zdefiniować w nim np nagłówek <h1>. Wynik wszyscy znają. Tak samo jest w przypadku innych elementów, takich jak np. bloków <div> lub paragrafów <p>. Choć wydaje się to dobrym rozwiązaniem, są takie elementy, które musimy za każdym razem ustawiać inaczej.

Poczytaj o normalize.css. Lepszej alternatywie dla resetowania!

Dla przykładu:

body{
   margin: 0;
   padding: 0;
}

Dlaczego warto resetować?

Czy musimy za każdym razem pisać ten sam kod CSS dla tych samych elementów? Nie. Wystarczy że skorzystamy z reset.css, arkusza w którym zdefiniowano zbiór reguł resetujący domyślne style przeglądarki. Jednym z najlepszych tego typu zestawów jaki miałem możliwość używać to znaleziony u Riddla:

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
}

article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}

a, ins, del {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption, th {
  text-align: left;
}

q:after, q:before {
  content: "";
}

Dodatkowo Riddle bardzo dobrze opisał wszystkie jego elementy, więc ja już tego robić nie będę. Od siebie dodam tylko że wspiera on HTML 5 co jest dużym plusem.

Kiedy używać reset CSS

Zanim użyjesz reset.css zastanów się czy jest on tobie na pewno potrzebny? To nie jest kolejny trend, lub sposób na rozszerzenie możliwości CSS. Nie resetuj ustawień tych elementów, dla których masz zamiar ustawić te same style jakie domyślnie ustawia za ciebie przeglądarka. Nie ma to najmniejszego sensu. Kluczem jest tutaj stworzenie idealnego dla siebie arkusza, w którym zdefiniujesz tylko te reguły które naprawdę, za każdym razem ustawiasz inaczej.