csscss-reset

which is better between the two kinds of css reset?


*{
  margin: 0;
  padding: 0;
 }

and

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,blockquote,th,td,p...{
    margin:0;padding:0
}

the first is simple,and I like it.But why many big web sites use the second method


Solution

  • The universal selector (*) selects all elements on a page. This is great, but this selector would end up unnecessarily targeting elements which shouldn't realistically have no margin or padding by default.

    Targeting specific elements is more logical as you wouldn't then have to override this CSS later on. For instance, if you wanted all instances of li elements within your document to have both margin and padding, you wouldn't want to include it within your list of selectors; equally you wouldn't want this to be targeted with * as it would add (albeit a very minuscule amount) to the time it takes for your page to render.

    Nowadays a lot of websites actually make use of Normalize.css (direct link to stylesheet) to reset CSS:

    Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.