Efficient Reuse Of Modular Style Sheets
May 24th, 2005
- Category:
- CSS,
- Web Development
This article is a follow-up to the article Modular CSS by Mike Stenhouse. After reading it, I thought I’d like to add some thoughts. You may want to read that post first to know better, what I am talking about.
Modules And Skins
I totally agree, that the use of modular style sheets increases maintainability and reusability. But instead of breaking down the style sheet into components that are more or less project dependent (like colors, fonts, etc.), I adopted a slightly different approach.
I split up the style sheets into the ones that are completely project independent – I call them modules – and the ones that are project dependent on the other hand, i.e. style sheets that control the look and feel of that particular web site. I call them skins. This may sound familiar, if you know Zen Garden (you most probably do). I am not sure if they use the name skin for their style sheets, but I think I was inspired by them regarding the naming.
This is also reflected in the file name of these style sheets. The modules, which are to be reused, obtain a prefix module_ whereas skins obtain the prefix skin_.
What kind of style sheets are that modules? So far I have an extended version of the global white space reset, better call it undo html, different layouts (Note: When speaking of layout I mean no more but the grid, for example 3 columns, source ordered), forms and a print style sheet. .
Here are some module examples: module_undo_html.css, module_3-col-layout.css, module_print.css…
The skin style sheet can in turn be divided into separate style sheets containing colors, fonts and so on.
Create A Repository
To go one step further and not having to gather the modules from different projects, I have an repository, where all the modules reside in. I can than easily pick the modules I need from that repository when starting a new project.
Create An Example Project
To make reuse even more efficient, I also created an example project, where the modules I always use are already imported, so I only have to add a skin style sheet to the basic loader style sheet.
Like copy and go. You can save a lot of time if not having to create the basic CSS structure every time from scratch.
This example project – one could call it a template – looks something like this:
css(directory)-
all(directory)module_undo_html.css
print(directory)module_print.css
screen(directory)module_3-col-layout.css
html(directory)index.html
I always organize my style sheets by the media type I use them for. As the undo HTML module can be used for different or nearly all media types, it goes into the all folder. A three column layout is used for a screened media type, therefore the layout module goes into the screen folder. The print module belongs to the print folder and so on.
The layout module would also be used for the media type tv I guess, but let’s not be to picky now. I wonder if someone has already used that media type?
I make the same considerations for the skin style sheets. You will probably have a skin style sheet both in the screen and the print folder.
Downside: Using @import And Internet Explorer
I would like to mention, that, when using modular style sheets, i.e. using @import directives to import external style sheets, it will break the “Save complete webpage” functionality of our beloved Internet Explorer. If you try to save the page, the attempt stops with an alert like “Could not save the page” (I only have the exact german message at hand).
Downside: Number Of Requests
Another downside is that the more modules one uses, the more requests to the server one will get.
I wonder, who else is using a repository or something similar and how do you organize your style sheets? Comments are very welcome and I hope you enjoyed this little article. Last but not least, I am sorry if my english isn’t perfect, as I am not a native speaker!