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
Related Entries
Comments
1. Adrian L. - December 18, 2006, 9:26 PM
I’ve worked with you for quite some time Jon, and since we frequently worked on each other’s projects, we both got to experience both your method and other methods for separating stylesheets.
I like your method of separation, but I always found that more and more would end up in the global sheet, instead of in the template specific ones.
What about section specific templates? Subsection specific? What about sites with four or five or six levels of distinct hierarchy? Do we separation them out into global, section, sub section, sub sub section, etc? And then we do that for IE6 and then for IE7 too? Potentially tens of stylesheets!
For me, it always seemed easier to have one or two stylesheets, and comment the crap out of them. That way I eliminated stylesheet and browser conflicts.
I also found it hard to find specificity errors in stylesheets when they were spread about four or five or ten different files.
On the other hand, I can see the benefit of having smaller file-sized stylesheets by separating them out the way you have outlined.
2. Jonathan Eckmier - December 18, 2006, 11:00 PM
Adrian: You’ve raised a couple of great points here, thanks for adding to the post!
What about section specific templates? Subsection specific? What about sites with four or five or six levels of distinct hierarchy?
I think in a circumstances like this is would have to come down to making sure that the mark-up for each sub-section, sub-sub-section, (etc.) to be very well commented (yeah even “commented the crap out of” ) and distinctly structured.
Even though I’m advocating the separation of stylesheets I think it’s important to not get carried away with too many and I’d probably stick to just having a stylesheet for each distinct section. Sub-sections for each section would get included into those ‘parent’ stylesheets.
And then we do that for IE6 and then for IE7 too? Potentially tens of stylesheets!
Even though I’ve done this (created section specific stylesheets for each separate browser) in the past, lately I’ve been leaning more and more towards having just 1 stylesheet for each browser version that I have to create some tweaks for. Most of the time there aren’t all that many CSS rules that need to be adjusted for different versions of IE (relatively speaking) to warrant a separate file for each browser version for each template.
3. matthijs - January 4, 2007, 3:20 AM
Lately I have gone from using more stylesheets to as little as possible. Even within the stylesheet I will rip out as much whitespace as possible, putting rules on one line instead of seperating them out.
Of course that will decrease the readability a lot. But what I gain is a much better overview of all rules and much faster searching. For me the bottleneck in working with a stylesheet is how fast I can find that one rule in which some property is set.
It’s very annoying to have to scroll up and down between for example the link color you wrote at the top of your stylesheet and the rules which overrule that one, lower down. Of course you could place all similar kinds of properties together (colors, layout, headers) but then you have the same problem in the situation in which you’d like to “style the sidebar”, for example. Whatever system you choose, at some point you have to scroll up and down or switch from file to file.
But I guess that it also depends on whether you are the sole developer or in a team.
4. Jonathan Eckmier - January 4, 2007, 11:14 AM
I think it really comes down to a matter of preference. I personally find stylesheets much easier to read if the CSS rules are on separate lines as opposed to having all the rules in one single-line definition. I think it may have something to do with the fact that I come from a programming background, so I’m used to seeing things in “function” form.