Search

Why I Like (and Use) Reset CSS

Posted: April 21, 2008 Comments(31)

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.

As Eric Meyer replied:

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.

Related Content

  1. Normalize.css Goes 1.0!
  2. Closing this Chapter on CSS Frameworks
  3. Improving Your Process: CSS Techniques Part 2

Categories

Categories Development, Opinion

Tags

Tags , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. 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.

  3. 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…

  4. 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.

  5. 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?

  6. 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.

  7. 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.

  8. @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.

  9. @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.

  12. I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.

    Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.

    So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.

  13. Hi Guys, Im new to these reset things and web design generally. Im currently trying to get my head round breaking up my CSS, one for type, layout etc…

    I understand I can have one main CSS that imports the type one colour one etc..

    If i want to use a reset do i need to put it at the top of all my CSS forms or just the main one that imports the other 2 or 3.

    ?

    Sorry for the newbie question!

    David

  14. @David: There are many ways to structure your CSS. Separating your styles into various sheets can help with organization, but also hinder maintainability a bit. Be sure to keep that in mind when establishing your preferences. If you separate your stylesheets, there is often a need to edit multiple files in order to make a single change. When using a reset stylesheet, you’ll want to include that document first, that way you’ve established your foundation. From there, you import your other stylesheet(s) on top of that. CSS cascades, meaning there is a hierarchy as to which rules make it to the screen. Each stylesheet is applied on top of existing rules, possibly overwriting previously set values. That’s why you’ll want to import your reset CSS and then add your site CSS on top of that. Hope that helps!

  15. Thanks Jonathan,

    So i have a reset.css… and INSIDE that css (after the reset code)… it says somthing like..

    import- typography.css – Fonts, sizes, line-heights, etc
    import- layout.css – all positioning, floats, alignments, etc.
    import- colors.css – colors, background images, etc

    is that right?

  16. @david: There are a number of ways to handle the importing of CSS; personally I’m a fan of how I’ve organized the styles for this website. Take a look at the source to see what I mean. Hope that helps!

  17. I’m not even really a designer, but I just happened to be doing a little SEO on our site tonight and happened to looked up why we had a reset.css file that didn’t seem to do a whole lot (not to my untraining eye, anyway). Nice explanation- I’m even going to forward this along to one of my designers who tells me constantly how using a CSS framework isn’t really feasible for him. He’ll appreciate your points, because I can see where you’re coming from now. Thanks Jonathon!

  19. […] 有反对就会有支持：Why I Like (and Use) Reset CSS. 公说公有理，婆说婆有理，并非所有问题都需要一个确切的答案，有时过程本身，就是追求的结果。 […]

  27. I am working on one huge web application, where I used CSS reset. Everything is working fine, but when I start validating accessibility points I found tab focusing not show any doted selection for any link. When I remove css reset then it will working fine.

    So, using css reset we are closing important accessibility points for disability people or is this any other way to resolve this issue.

  28. […] This is a new one for me personally. I 've noticed it more and more it other peoples websites and I totally see the reason for using one. The point of a reset.css file is to clear out all of the browsers predetermined style properties it helps you out with browser quirks and to retain consistency amongst the multitude of browsers out there. I read a great article online about the debate whether to use one or not here:  Why I Like (and Use) Reset CSS […]

Leave a Reply

Your email address will not be published. Required fields are marked *