Are “reset” style sheets bad?

It slipped by me that just last week—a few days before Canberra’s first BarCamp—Eric Meyer wrote an article respond­ing to Johnathan Snook’s announce­ment that he doesn’t use reset stylesheets. Fol­low­ing that came Jens Meiert’s argu­ments that reset style sheets are bad.

I can see where Jens is coming from but don’t see any com­pelling reasons that would con­vince me they’re inher­ently bad. Below I’ve tried to counter some of the common argu­ments that get raised against reset style sheets.

Overriding the overridden

The addi­tion of extra lines in the author’s style sheet to over­ride reset sheet def­i­n­i­tions can become a waste of time and effort. The amount of def­i­n­i­tions that need to be rede­fined comes down to two things: how many def­i­n­i­tions are made in the reset sheet and the scope of the website.

Some large projects may even demand for an opti­mized pro­duc­tion set of style sheets with a sep­a­rate com­mented and split devel­op­ment set. A designer will need to decide how many def­i­n­i­tions are going to be made in the reset style sheet and weigh that in turn to the rede­f­i­n­i­tions that need to be made. This should be com­bined with the use of opti­miza­tion tools such as CSSTidy and of course the removal of redun­dant def­i­n­i­tions from both the main style sheet(s) and reset sheet. See Going nuts, below.

Latency

Another style sheet in the mix will def­i­nitely add to the full down­load size of a website. Again this is rel­a­tive to how large the reset sheet is. It is pos­si­ble to com­press CSS, (X)HTML, and Javascript files. With the YUI reset style sheet sizing at around four kilo­bytes, the opti­miza­tion of images and their are imple­men­ta­tion within the design is a more preva­lent issue.

Removing functionality and usability

Remov­ing usabil­ity through the reset sheet and neglect­ing to imple­ment it by other means or redefin­ing it is not an inher­ent fault of the reset sheet but of the designer; the designer should look into what ele­ments the reset sheet is defining—never copy and paste blindly.

Going nuts

Reset style sheets aren’t bad because some are all-​encompassing in their def­i­n­i­tions and this cer­tainly shouldn’t be a case for never using them. Ulti­mately the number of def­i­n­i­tions in a reset style sheet should come down to how useful each is going to be in your project.

I take Eric Meyer’s posi­tion on this whereby we should use the tools that suit us best:

The key here […] is that you eval­u­ate various tools by think­ing about how they relate to the ways you do what you do—and then choose what tools to use, and how, and when. That’s the mark of someone who thinks seri­ously about their craft and strives to do it better.”

Thus:

  1. Use what suits you best, even it’s just the age old
    * { margin: 0; padding: 0; }
  2. If you use a reset style sheet make sure you know what you’re reset­ting and why.

6 comments

  1. 1. chesty
    Apr 26, 09:08

    The only thing missing from this post is… what’s a reset style sheet?

  2. 2. Jordan Clark
    Apr 26, 10:39

    Good article. As I basi­cally said on Jen’s blog, I don’t think using a “reset” style sheet is a black-​and-​white issue; as with most things in web devel­op­ment, it depends on the require­ments of the project.

  3. 3. Pascal
    Apr 26, 14:42

    @chesty: “reset” style sheets are CSS files that reset ele­ments defined by user agents (UA), such as a web browser. UAs will define styling for the basic (X)HTML ele­ments in dif­fer­ing ways. The idea here is to provide you with a clean slate to work with by setting all of the values back to sen­si­ble defaults.

    Of course “sen­si­ble” is the oper­a­tive word—it is pos­si­ble to go some­what over­board with reset style sheets but in general they can be highly useful. Exam­ples of reset style sheets can be found in the YUI library and Google’s Blue­print library.

  4. 4. Thomas Jollans
    Apr 28, 08:51

    Not to say that reset style sheets are bad, but they’re some­thing I’d never use myself—what I want to control, I (re)set myself, when it comes to impor­tant aspects of the overall design, I set every­thing exactly anyway, and the rest the user can chose soi-même, or let the UA do the honours, of course. If I care how exactly lists look, I man­u­ally set them without unset­ting some margins before­hand, but usually, I just leave the defaults.

  5. 5. Lindsay Holmwood
    Apr 29, 20:31

    Latency is really a non-​issue. There are prob­a­bly more impor­tant things to opti­mize than the load latency of a few 4k stylesheets.

    Most modern web browsers and servers do every­thing over HTTP keep-​alive, so it’s not par­tic­u­larly expen­sive for a client to GET another file.

    If you’re really worried about latency, there are various projects around that combine your stylesheets into one big one.

  6. 6. Pascal
    Apr 29, 22:56

    @Lindsay Holm­wood: Indeed—like you say “it’s very much like grasp­ing at straws”.

Post a comment

Please share your thoughts or add a note if I missed something.

Required fields are marked by an asterisk (*). Your e-mail address is never published nor shared. You can use common text formatting XHTML elements (e.g. a, acronym, blockquote, code, em, strong, …). If you’d like to directly respond and link to another comment, you can do that using the Twitter-style @reply (i.e., @Randy Bender: …).

*
*