Stylesheet Sanity, Part 1
Published 22 November 05 by Justin French, 10 comments
There’s nothing particularly ground breaking here at all, but I don’t see these techniques being used all that often, and I’ve found that they can really help…
- reduce clutter in my CSS rules and mark-up
- reduce the length of my stylesheets
- reduce the verbosity of my classes and ids
- reduce the need for classes and ids at all
- improve the legibility and usability of my stylesheets
As an experiment, I’m breaking this rather long article in two parts, published a few days apart. Without further delay…
The Body Tag
Get in the habit of setting either an id or class on the body tag for each conceptual section of your website. Some examples:
<body id="home"><body id="about"><body id="weblog"><body id="contact"><body id="products"><body id="people">
Why? Let’s say you have one stylesheet that contains the bulk of your rules for your whole site (quite a common practice). With an id attribute on the body class, your stylesheet can easily differentiate between two identical elements in different sections of the site. Let’s consider the following basic mark-up:
<html>
<head>
...
</head>
<body id="home">
<div id="wrap">
<div id="main">
...
</div>
<div id="sub">
...
</div>
</div>
</body>
</html>
I can start by setting some sensible default rules for my site. In this case, I’m setting up the columns, but you can set whatever you want, of course:
#wrap { margin:auto; width:760px; }
#main { float:left; width:460px; margin-right:30px; }
#sub { float:left; width:270px; }
Then further down in my stylesheet I might choose to override these defaults and set the columns to an even width for the home page. Since the home page has id="home" in the body tag, this is utterly easy:
#home #main { float:left; width:365px; margin-right:30px; }
#home #sub { float:left; width:365px; }
And maybe I change the color scheme completely for the weblog section:
#weblog a { color:red; }
#weblog h1,
#weblog h2,
#weblog h3 { color:#555; }
Apart from the id attribute in the body tag, I haven’t had to touch any of the mark-up. The alternative would be a whole bunch of id and class attributes adding bulk and clutter to your HTML.
Start with the site-wide defaults, then specify overriding rules for the sections below that, grouping them by section. For me, the important thing here is that the rules make perfect sense when I read them out loud, and my stylesheet is a pleasure to read and navigate.
The stylesheet for justinfrench.com is well over a year old now (and could certainly use a clean up), but you’ll see plenty of examples of this technique in use.
Some Solutions
Most websites are built with a content management system, templating system or other publishing tool, so there’s usually a site-wide template or header which sets the <body> tag, right? This makes it hard to set the id attribute for the different sections, right? Wrong. Here’s some suggestions:
For Textpattern sites like this one, you could use the name of the section as the id in most cases, with something like <body id="<txp:s />">. Textpattern templates can also use embedded PHP code, which brings me to solution #2…
For PHP-driven sites, you could consider using the file name of the current file or by breaking up the $_SERVER['REQUEST_URI']. Here’s a quick and dirty function for the former:
function make_section_from_file() {
$bits = split('/',<i>FILE</i>);
$file = $bits[count($bits)-1];
return str_replace(array(’.php’,’.html’),’’,$file);
}
And of course, there’s Rails (or any other MVC framework really) where the name of the current controller makes a perfect candidate. Try <body id="<% params[:controller] <span>>"> or to avoid the ”/” in modularized controllers (like admin/dashboard) try <body id="<</span> params[:controller].gsub('/','-') %>">.
Stay tuned for part two later this week, where we’ll take these concepts a lot further, and take a look at what I’m calling layered stylesheets.
Update: I’ve turned comments off for this article. You may thank the spammers.