why don't use * instead of all that tags for reset css?-CodePudding

I want to reset the default styles of CSS, I'm following the guide: A Modern CSS Reset

The guide suggest:

body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

Isn't it the same as this?

*{
  margin: 0;
}

why should I use the first one?

CodePudding user response：

With * {...} you reset / modify all possible tags. With div, p { ... } you will reset / modify only div, p tags.

CodePudding user response：

Because they aren't the same.

The list of elements in the above CSS snippet aren't all the HTML tags. For starters, the video tag isn't added, so it's not equivalent to *, which would encompass all of the (visual) HTML elements.

Here is a resource that shows all the tags.

CodePudding user response：

Generally removing all default styles from all elements is not what you want. Some default styles just works fine and it's easier to let them be there :)

CodePudding user response：

It's not the same. Let me try to explain.

The linked guide suggests:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This removes the box-sizing from the defined elements, meaning all elements and all ::before and ::after elements). Learn more about the ::before pseudo-element: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Furthermore, the guide suggests removing the default margin from a list of elements, not all elements as the * {} would do:

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

Learn more about default values for various elements: https://www.w3schools.com/cssref/css_default_values.asp

Your 2nd code block

* {
  margin: 0;
}

removes the (default) margin from all elements. You could also overwrite the margin of elements defined before.

This is why CSS is named CSS, cascading stylesheets. Styles cascade ... several different style sheets can be active for a single document or element at the same time.