which is better between the two kinds of css reset? [duplicate]

Question

This question already has answers here:

Why don't CSS resets use '*' to cover all elements? (3 answers)

Closed 8 years ago.

*{
  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

Answer 1

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.

Answer 2

The first one does not clutter your debug tool (like Firebug) but the second one is more customizable as you can choose the elements that are not reset. Usually CSS reset files do not reset element like input, select or button and use the second form.

Answer 3

You should use SECOND ONE

because this is Best one logically correct sometimes we need to use default properties of HTML elements.