December 18, 2006
The Separation of Style
December 18, 2006, 6:57 PM | 4 Comments
As web professionals we’re always trying to find ways to improve our development practices. Whether it’s finding a better, more accessible method of replacing some text with an image or figuring out a better way of enhancing a site with unobtrusive JavaScript, “best practices” are constantly evolving, so discussion about them is also constant, and that’s a great thing. The more we discuss our best practices, the more we can help make the web better for everyone.
I’ve been meaning to post this article for a while and it’s been too long since my last CSS Tip, so I thought for my next one I’d write about one of the best practices that I like to employ when working on the production of a site.
Typically speaking, most site designs call for at least 2 distinct page templates and more often than not it’s more than 2. Yes, there are times when a site will only need 1 template, but that’s a fairly rare occurrence. In most cases where there are only 2 templates it’s likely that those designs are a home page template and an “inside” page where all the other content would be featured.
To keep things organized I’ve gotten in the habit of separating my stylesheets based on each distinct template that a site design consists of. Before I go any further though, I’ll just state my disclaimer now: by now means am I saying that the methods I’ll describe in this article are the best way of doing things and I’m not naive enough to think that there aren’t other methods of keeping your stylesheets organized. Some people that I’ve talked to like to keep all their CSS rules in 1 stylesheet, site-wide for all templates regardless of how unique they might be, and that’s OK too, it’s just not my preference.
What I generally do when I’m given a design for a site is to follow a few simple steps:
- The first thing I usually do is to start on the home page template and get that done before moving on.
- Once the home page template is done I’ll go through the designs for all the remaining templates and identify all the elements that have been created for the home page template that will exist globally across the rest of the site. (Note: I usually never start creating the template for the home page without first taking a look at all of the template designs - that way, when I’m producing the home page template I’ve got a pretty good idea of which elements will be re-used for other templates).
- After identifying the elements that will be common across the whole site, I’ll take all of the CSS rules for those elements and put them into a “master” or “global” CSS file and leave any remaining CSS rules in a home page specific stylesheet.
- Once I have the global stylesheet created I’ll get to work on the rest of the site templates, creating a unique stylesheet for each distinct site template that the site will require.
How about some examples?
If I had a design that required 3 templates (home, article and I don’t know, search results maybe) I’d create a global CSS file and then 3 more CSS files for each distinct template. Each of those 3 separate CSS files would then import the global CSS file so that the site’s common elements are applied to each separate template. Essentially the code would look like this:
global.css:
/* Global Site Elements go here */
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, ul li, form, fieldset {
}
#Header {
}
#Navigation {
}
And then for each distinct template I’ll import the global stylesheet. Note: CSS imports must be done at the start of the CSS file before any CSS rules.
home.css:
@import url(global.css);
/* Home Page specific styles would go here */
page.css:
@import url(global.css);
/* Inside Page specific styles would go here */
searchresults.css:
@import url(global.css);
/* Search Results specific styles would go here */
…And this benefits me how?
The main benefit of separating your style rules into template specific files is that it keeps everything a little more organized. When you’re editing a CSS rule you don’t have to worry about how many of your templates that change is going to effect (unless of course, you’re editing some rules in the global CSS file). For me, debugging a project (whether it be a programming issue, CSS tweaks for various browsers or unexpected content changes) has got to be one of the most frustrating tasks that needs to get done, so anything that can make it easier and more organized is a welcome addition. In my experience, tweaking a site with only one stylesheet can prove very confusing.
As far as the draw-backs go, really the only one is that you end up with more files to manage on your server, which can also be confusing at times. Having said that, with tools like Firebug and the Web Developer Extension allowing developers to see exactly which CSS rules are coming from which files, these draw-backs are fairly minor.
Feel Free to Disagree
As with any ‘best practice’ article I would assume that many people are going to disagree with my train of thought or have suggestions on how they’d do things better, and that’s great. Please feel free to share your thoughts and suggestions because I’m always up for a good conversation.
Posted in: CSS, CSS Tips, Web Development