DRY CSS

When I first thought of writing this post, my ideas were more about describing a good CSS organization and using reusable stylesheets. There are two tips in this area that I still recommend:

An element can have multiple classes: It’s a pretty simple idea, but isolate out layout styles and presentation styles. Even fonts and coloring. Make reusable classes as much as possible. A design like this rocks, esp. if it includes a small description of the classes used at the top of the .css file. At any point you feel an urge to create a new class, resist the urge and try to recreate the functionality using already existing ones. Break older classes further if you have to.

For e.g.:

.warn {
  color: red;
}

.top {
  position: absolute;
  top: 5px;
}

And this html:

<p class="warn top">You cannot do that, it'll wreck havoc!</p>

… is way better than combining those tasks. Why? Because you can reuse those classes.

Keep your page-specific CSS structured by an ID on the body: Again, a pretty simple idea, the <body> tag can take an ID that can be an indicator of the page name. Use that to create special styles for that page alone.

Example: you want the warning on product pages to appear in blue instead of the usual red, and you want more padding on top:

#product-page .warn {
  color: blue;
}

#product-page .top {
  position: absolute;
  top: 10px;
}

with this HTML:

...
<body id="product-page">
...
<p class="warn top">You cannot do that, it'll wreck havoc!</p>
...
</body>

The advantage is that you don’t hack the CSS or add more styles. It just works.

I have more CSS organization tips, but the above two have worked wonders in 90% of the projects I’ve been involved in. Let’s move on to using tools to write better CSS.

Use a CSS generator: In the Ruby/Rails world where I mostly live nowadays, there’s an excellent plugin called cssdryer. Using this, the CSS above becomes much cleaner:

#product-page {
  .warn {
    color: blue;
  }

  .top {
    position: absolute;
    top: 10px;
  }
}

… which is lovely. Finally, nested tags! And variables, and all the power of ruby! [There’s also Sass]

If you are not in ruby land, use a CSS pre-processor. This article uses the m4 macro processor to generate DRY CSS.

Now, here’s one more lovely tip. Use a CSS framework. The most appealing one (altho in beta) is blueprint, since it only does a sweet grid system and good typography. Yahoo’s Grids seem bloated.

4 Replies to “DRY CSS”

  1. Nate: ‘bloated’ wasn’t in the context of the CSS generated, but in the way the html has to be written to use that CSS. I wish the Grid Builder could permalink to a layout I create [feature request? :-)] but a complex layout seems much harder to model (and way more verbose) than an equivalent in blueprint.

    Just firebug this page: http://bjorkoy.com/blueprint/test.html or http://bjorkoy.com/blueprint/grid-test.html and notice that with just a handful of conventions “column span-x first/last prepend-x” the whole layout is constructed. No assumptions of hd/ft, yui-main, etc.

    I haven’t used both of these in an actual project (and this many a time is the key differentiator), but have already modeled a good many mocks with blueprint easily, whereas every time I look at Grids, it puts me off…

    Like

  2. Hey,

    Great post; good tips.

    What about YUI Grids* seems bloated? The file ways ~ 2.4kb, and if you server it from our free and fast servers (or host it yourself with gzip enabled) it’s only 0.6kb.

    It might be possible to have something that weighs less that .6kb, but unless your site is image-free and incredibly optimized already that’s minimal upside.

    Of course it would weigh much less if it supported a single layout. But that .6kb gets you 100s of layouts from a single file.

    I only ask because I’m always looking for feedback to make it better.

    Thanks again for the quality blog post!

    Thanks,
    Nate

    Nate Koechley
    YUI Team, Yahoo!

    * Disclaimer: I wrote YUI Grids

    Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s