Why I don't like reset stylesheets
Sometimes it’s hard to tell the difference between an idea that’s bad an idea that’s just different. Reset stylesheets have been one of those ideas for me but after working on a couple of different sites that use them I’ve decided I personally don’t like them.
The idea of a reset stylesheet is to strip the default style out of a webpage before you start to apply your design. This gives a predictable base for you to start with and removes browser inconsistencies with the default styles. There are a number of different reset stylesheet options. The most popular ones are from Eric Myer and YUI.
Sounds like a great idea in theory. Slight browser inconsistencies (particularly with margins and padding) are a pain to remember and can really mess up a design if you don’t test in multiple browsers.
Why set the styles and then set them again?
The big problem I have with it is how redundant it can be. The way I’ve seen reset stylesheets implemented is you include a reset stylesheet to reset everything to empty (including things like removing bold text from the <strong> tag) and then you create another stylesheet where you set all the styles that you want in the page.
It feels pretty redundant to have to set styles like bold text on the <strong> tag or numbered bullets on the ordered list. Most of the defaults make a lot of sense and most of them are pretty consistent between browsers.
It also feels kind of redundant to have the browser have to download and apply the reset styles and then download and apply the real styles. I haven’t actually ever seen a reset hurt the rendering time of a webpage but I have worked on a few sites where the number of requests that the browser was making became a problem and having the reset stylesheet as a separate request didn’t help.
Why make me learn what the base styles are again?
The other thing I don’t like about it is that the browser no longer acts the way I’d expect. I’ve got years of experience with how browsers render things and usually can picture in my head what a style should do to a page. Adding a reset stylesheet means that it’s not as intuitive any more.
A better solution?
I think a better solution would be using a stylesheet like YUI base that makes browser defaults the same across different browsers as a starting point for your own stylesheet and then adding your own styles for the particular site. I don’t think I’d even bother setting a default style and then overriding, I think I’d prefer to just set the style once.
I think using something like the YUI base as a starting point is a great idea, but I think if I was going down this path I’d want to customize it as a I worked to make my own version to use on other sites.
A tool I don’t like, but something worth thinking about
Eric Myer’s response to people questioning whether reset stylesheets were a good idea or not was pretty much, use them if you find them useful and or don’t otherwise. I just wanted to put my hand up as not personally liking them (since they seem to be every at the moment) in the hope of making other people question them too.
Comments
IMHO, the use of a reset stylesheet is a good thing. I think HTML tags should NOT have inherent presentation, and they should be used purely to add meaning to the content. It is then up to the designers to provide styling that adheres to brand guidelines.
I don’t see a problem with defaults that suggest what the semantic meaning is. I think headings are a good example of this. You don’t have to style your headings anything like the default browser styles but I think the default styling reminds you what they’re for.
I don’t like them either, for the reasons you specified. Always glad to hear of other designers willing to go against the trend. If other designers want to use them, that’s fine, I just don’t want designers to think they *have to* use them.
I prefer to use them. I have my own base reset though. Some things are redundant to reset like strong and em, but others are great, like stripping margins and padding. It’s an easy way to start with a nice clean, blank canvas.
Why create extra work for yourself?… if all browsers were the same fair enough but with each browser different its good to have a common ground. Maintenance is king, keep it simple.
I feel that resets are a bit of a mixed bag. On one hand I think the goal of a starting point where all browsers are the same is a good one. On the other hand, it seems a bit counter productive to just remove all the default styling and have to set it all up again. Not only that, when you load up the page, the browser has to apply your reset stylesheet and then your real styles. Also have had a few situations where styling from the reset stylesheet has interacted with our real styles in an unpredictable way.
I wonder if there’s a better way to do this. The reset stylesheet seems like it has good goals, just the implementation isn’t really to my taste.
I agree. The only thing I don’t agree with is that YUI base would be a good solution. Because YUI base needs YUI reset to work as intended. Otherwise your styles will still look different per browser.
As I like the idea of *basic* styles a lot better than reset styles, I blogged about my basic styles here: http://blog.selfthinker.org/2011/05/08/basic-is-the-new-reset/