CSS resets help enforce style consistency across different browsers by providing a clean slate for styling elements. Resources like Normalize, et al., do an excellent job at managing this. For a couple of years now, I’ve opted to go with a minimalist approach to resets and found it to be just as useful:

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

Now elements will be stripped of margins and padding, and box-sizing lets you manage layouts using the CSS box model.

Another minimalist alternative is to let box-sizing be inherited from the html selector:

html {
  box-sizing: border-box;
}

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

This makes it easier to change box-sizing in plugins or other components that leverage other behavior.

One size fits all?

You might be looking at this and asking the obvious question: “Is that really enough?” CSS reset libraries do a considerable amount of additional work, so it’s easy look at this solution and assume three lines of code wouldn’t be sufficient. That’s up to you to decide.

If this approach does just enough of what you need, why integrate a separate resource? If you decide you need a full CSS library, at least you’ve given it some additional thought for future projects.

• CSS