If you develop websites for multiple browsers you’ll quickly realize your un-styled HTML doesn't look the same in all browsers. This makes it quite hard to keep up a consistent look and feel of a website among chrome, firefox, safari, brave, opera and browsers we better not call by their name.(Internet Expl...Psshhhhtt!)
CSS standardization to the rescue
If we look at their respective websites their descriptions sound almost interchangeable:
▶️ In this CodeSandbox normalize.css is applied on otherwise unstyled HTML elements
normalize.css claims to “make browsers render all elements more consistently and in line with modern standards”
normalize.css every single decision is documented and explained. It seems like every style change is there for a reason.
▶️ In this CodeSandbox reset.css is applied on otherwise unstyled HTML elements
reset.css claims to “reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”
Judging by the style definitions,
reset.css takes a “roundhouse-kick” approach and simply strips all styles from common elements.
So if they are so similar. What’s the point of adding one over the other?
When to choose which?
- You want to think less about pesky browser inconsistencies
- You’re not planning to restyle every element from scratch
- you’d like to work from a blank canvas
- seek to restyle even the most elementary HTML elements
- you hate having to overwrite the default styles