What is a CSS Reset? The purpose of a CSS Reset was to start with a clean slate, or consistent baseline between all browsers when starting a new web development project. The idea can be summed up nicely by Jonathon Snook:
In case you've never heard of such a thing, a CSS Reset is designed to set a number of element styles to a specific baseline that creates consistency across various browsers.— Jonathon Snook, No CSS Reset
Over the years there have been many resets, all of which I would at some point try and read more about. The asterisk or star rest is one I never was keen on; it uses a lot of browser muscle, therefore slows the browser down, to go through every HTML element and set it's margin and padding. On the form field front, removing the margin and paddingcan cause ill effects as well.
1* {2 margin: 0;3 padding: 0;4}Build Up
Eric Meyer came up with a CSS Reset, and has revisisted it many times over the years. I've used Erics for years, and even argued ideology with changes made, because “what” to actually reset is always a good argument. Some people, like Jonathon Snook, decided not to use a CSS reset at all and I feel like that is the right choice for what he is doing. If you strip margin, padding and other CSS from the native browsers control, you have to build it back up.
Boiling Up
I have been a bit proponate of the work the team over at HTML5 Boilerplate have been doing; talk about years of knowledge being pooled into a cauldron to make the best starting place for every project, with modification of course, and out comes the HTML5 Boilerplate. These guys are awesome, I've learned so much, but back on track version 1.0 used a modified version of Eric Meyer's Reset, modified by Richard Clark, called the HTML5 Reset Stylesheet. This offered more build up on top of the stipping out of elements Eric Meyer's reset performed, and added HTML5 elements. On top of that the HTML5 Boilerplate added even more build up to normalize what resets ripped out, or even better to stabilize what one saw from one browser to the next (huge feats in the form arena). Using best practices the build up was fantastic, how could it get any better?
Video killed the radio star
At the end of the day, really what we are trying to accomplish is consistency. By resettings the browsers natural CSS but overriding it and building it back up we are just looking for a way to see things more consistenty as we view a site from one browser to the next. With upwards towards 10 browsers at any one point in time, in multiple operating system environments, this isn't asking too much. So unlike a browser reset, work on a Normalize.css started appearing and eventually become baked into version 2.0 of the HTML5 Boilerplate.
Who are these guys?
Nicolas Gallagher and Jonathon Neal took the approach of a global reset differntly, looking at browser default CSS styling as a blessing and decided to just slightly modify that existing code and make it better with some new best practices.
- Will it work for every project?
- No.
- Does it really kill off the CSS Reset?
- Not for everyone, but it has for me.
- Will Jonathon Snook use it?
- Probably not.
- Is it a good start for future proofing?
- Hard to tell.
With the advent of Mobile First mentality, presumably this is still a good starting place as mobile browsers are moving closer to desktop browser capability. I can say that I for one will start my projects with Normalize.css, and this is the first time in years I'll be moving from Eric Meyer's Reset so that says a lot for what Nicolas and Jonathon have accomplished because I feel they have hit the nail on the head of what I want to accomplish with a baseline set of styles. As always, figure out what your projects requirements are and see if it makes sense to use Noramlize.css, Eric Meyer's Reset, or even HTML5Boilerplate.
Helpful?
