Why I Like (and Use) Reset CSS
The recently dormant topic of CSS frameworks has again spewed a bit of magma last week courtesy of No CSS Reset written by Jonathan Snook. Naturally, the topic alone is quite a conversation starter, but I’ve got to admit: I was surprised at the reaction it received. Jonathan’s piece was a very down to earth article outlining why he chooses not to use a reset stylesheet. I, on the other hand, have been using a reset stylesheet for a bit of time, and I do prefer working that way.
Now, I understand I’ve spoken quite a bit of CSS frameworks over the past year, and even though my sensational headlines have categorized my position to a greater extent than I’d hoped, I learned quite a bit from both camps during the “Great CSS Framework Debate of 2007″.
Reset CSS causing more work for developers?
Jonathan’s post has garnered quite a few comments to the tune of developers not using reset stylesheets simply because it creates more work for them, and they want nothing to do with that. In all honesty, I fail to relate to something like that. As I reflect on all the websites I’ve worked on in the past few years, not once have I used a browser default to style an element. I always change a number of properties simply because the browser default won’t work with the design. In my case, I’m consistently writing CSS for elements with browser default styles. As I browse the Web, I don’t often examine stylesheets, but from what I can see, there aren’t many websites using browser defaults (save for strong or em).
I have a hard time accepting a conscious choice to pass on a reset stylesheet simply because it causes you more work. I do (wholeheartedly) believe that a reset stylesheet may not save you any significant amount of time, but it will take some persuading to show me it truly creates more work to be done.
I prefer to work with a reset stylesheet if for nothing more than comfort in knowing every element on screen is rendering as such because I told it to. I don’t feel additional work was created for me as much as I feel the work is a bit more solid.
The trouble (I’ve got) with browser defaults
One point that hasn’t been risen quite yet is the topic of browser defaults in their simplest form. Who is to say that browser defaults are acceptable to begin with? I’d like to be explicit here in saying that I’m playing the part of devil’s advocate. I often take that stance with issues to put myself in some new shoes.
I completely understand why browser defaults are put in place, it would be silly to try to debate that point, but my question to knowledgeable developers is this: why do you prefer to work with browser default styles?
We’ve all come to accept that pixel-perfection is not worth the headache, but using browser defaults will indeed increase the variance of your design. I can agree that it’s not a big deal, I’ve just found it to be a personal preference of mine to avoid. I’m completely fine with slight differences in rendering when comparing browser to browser, we’re not designing print brochures after all. I do make an effort, though, to keep things to a minimum.
As a follow-up, I’m curious to hear how many developers found it troublesome working with browser defaults when just learning CSS? I’m self-taught in quite a bit when it comes to what I know about Web development, and I’m not too embarrassed to admit I was honestly confused when it came to default styles on heading elements in my early days of working with CSS.
In my honest, personal opinion, I don’t feel that browser defaults truly belong. That is not to say I feel they’re inapplicable. Without browser defaults, Web design and development be in a different boat altogether. It’s just that after looking at things from a more distant standpoint, browser defaults seem partially counterintuitive to me.
Reset CSS as a framework
The idea behind a framework is to save yourself time and repetition, but in my experience I rarely find myself repeating any significant amount of CSS project to project. That’s one of the biggest reasons I have chosen not to use a public-facing CSS framework such as Blueprint or YUI. There is a significant population who does make use of the frameworks and I think it’s great. For them.
While a framework can technically be defined as something which can be consistently reused and applied to any project while working for your benefit, a reset stylesheet, to me, is more unique than that. I view a reset stylesheet as something to level the (rocky) playing field when it comes to writing CSS. As I write that, I realize that’s exactly what Blueprint (or any other CSS framework) is trying to do. I think a reset stylesheet changes things in a different way, however. Instead of working to help you out with browser quirks and retain consistency, a reset stylesheet is more of a big eraser, providing a ‘clean slate’ if you will.
A reset stylesheet does inherit an important benefit of a framework: instant implementation. A reset stylesheet is as easily implemented as keeping a local copy on your hard drive, copying it to your CSS directory, and including it in your document(s).
At the end of the day, I’m not sure that I can refer to a reset stylesheet as a framework by itself, but instead consider it an optional piece of one. I’m sure many will disagree, but a reset stylesheet to me is more a piece you work on as opposed to work with.
To each his (or her) own
As with the original CSS framework debate, it comes down to personal preference and what works for you in your workflow. It’s been said before and I’m going to say it again: I’m glad such a large number of designers and developers are ready (and more than willing) to have this conversation. On top of that, everyone has personal experience to back it up.
Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.
So it’s no surprise that we, as a community, keep building and sharing solutions to problems we come across. Discussions about the merits of those solutions in various situations are also no surprise. Indeed, they’re exactly the opposite: the surest and, to me, most hopeful sign that web design or development continues to mature as a profession, a discipline, and a craft. It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.
I wouldn’t have it any other way.
The rest of Eric’s entire response is extremely well written, and definitely worth the read.
I do find it a bit troubling, however, that with a number of comments left in response to recent articles written on the subject of reset CSS, zealotry continues to pop up. Everyone has a reason, good or bad, for how they do things. It’s important to have civilized conversation on the subject as opposed to narcissistic comments which don’t help anybody.
Comments
George
April 21, 2008
8:34 am
I agree. I’ve tried out a few of the CSS frameworks and I don’t really find them useful. In my opinion CSS is too bespoke to the design to have say default typography for every project.
I use reset to allow me to have a common starting point with all browsers.
For me this is what makes frameworks useful. jQuery for example takes care of browser inconsistencies so I don’t have to worry about it. Similarly using a reset takes out many browser problems I would otherwise have to deal with.
pepelsbey
April 21, 2008
9:11 am
Yet another point of view: Why “Reset” Style Sheets Are Bad
Mubashar Iqbal
April 21, 2008
10:01 am
I don’t have much of use for the many CSS frameworks out there, although I see how they could be useful in some cases, but I can’t imagine using a Reset file of some kind.
It may add a little work, but not having one can end up eating up just as much time when things don’t quite line up as they should across multiple browsers.
Even though some of us have come to realize that pixel-perfection is not worth the headache, there are still plenty of people out there who expect it…
JR Tashjian
April 21, 2008
1:53 pm
Since I have been introduced to the reset style sheet, I use it for every website I create. I agree that it creates a “clean slate” for my development purposes. Yes it does “reset” certain browser defaults, but does not fix all (that is not it’s purpose). You will always run into issues but, with experience you will learn how to handle them. I also agree with you that a reset style sheet is something you work on, not what you work with. Every developer has something they almost always run into while coding (fix, missing default, etc…) which could be tacked on.
I also agree, and believe browser defaults don’t belong. I think a web browser should be independent of the operation system. The issue I am talking forms. Browser defaults can wreck forms if they are not focused on. Forms are used for some sort of communication, and with every browser rendering/behaving differently, you run into an accessibility issue.
I have looked at CSS Frameworks, and personally don’t use any that have been released. As stated above, everyone has there own way of doing things therefore, we have to find out what works best for us individually. I believe everyone should have some sort of starting point to get them up and running, which is exactly what a framework is for.
David Hucklesby
April 21, 2008
11:43 pm
Yes. I use and love Eric’s reset CSS too. But I do not include it in my documents.
Instead, I begin with the reset styles, then make sure every element in it gets the margins, padding, font sizes etc. that I prefer. After that - no need for the reset, methinks.
Thoughts?
Rafael Masoni
April 22, 2008
2:41 am
Sincerely and of course not to offend anyone, I find it stupid to say that resets are bad. They’re there to let the look you want be the same (or as close as possible) in any browser.
I don’t use frameworks, but I reset everything I need by my own, before styling.
@David Hucklesby: I find your technique a bit confusing for me to apply but it’s clever and can save a lot of unnecessary code for a particular project.
James Norton
April 22, 2008
3:24 pm
I do not use reset style sheets.
A question. Why set styles for elements you are not using in your website?
I tend to have a global stylesheet which sets default styles on elements for my site. When I first use an element which is not in the absolute common set (anchors, paragraphs, lists, header levels 1-3 and a few others), I will add a line to this style sheet with the defaults I want.
JR Tashjian
April 22, 2008
7:38 pm
@James Norton: Not saying you need to use one, as what you described above works for you. The reset stylesheet is used to reset browser defaults. So, instead of trying to figure out what elements you are going to use, or need to reset for a specific project, you would create a reset stylesheet to save you time. That is the primary reason for all frameworks. Spending less time on common tasks and getting right to the task at hand is important.
Jonathan Christopher Author
April 24, 2008
7:00 am
@Mubashar Iqbal: Forgive me for being a bit confused, but you said “… but I can’t imagine using a Reset file of some kind.” Did you mean you can’t imaging not using a reset?
@JR Tashjian: Browser defaults are interesting. Without them, the Web may be quite a different place today taking into consideration the fact that the Web in its infancy didn’t incorporate CSS, leaving HTML alone to stylize documents.
@David Hucklesby: I think you’re using Eric’s reset exactly as he intended.
@Rafael Masoni: I’ll be blunt. I know you said you don’t want to offend anyone, but stating that you think a choice by another developer may be ’stupid’ does come off as a bit offensive. Continuing, your opinions are as valid as the next guy. Thanks for leaving your thoughts.
@James Norton: Many times the website I work with are integrated into a CMS, forcing me to account for as many elements as possible.
Geekaholic: CSS browser defaults are the bane of web design
May 2, 2008
3:36 am
[…] to resetting and re-defining styles to look exactly the same in every browser. I completely second Jonathan Christopher when he […]
Comments RSS
10 comments so far