Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

The Challenge

I recently finished a relatively large site involving 12 different page templates. When I was finished, I sent off all the templates to my client for production, along with one enormously long style sheet. The client was very pleased with the site, but wanted me to make things more “modular” – the production team was a large one and they needed for multiple people to be able to work on various sections of the site at once, using a version control software to keep track of changes. I had already marked up each page-specific area on the style sheet with comments, but apparently when my client’s production team tried to pull these sections out and deliver them only to their intended templates things were breaking all over the place.

I had never worked with more than one stylesheet before (except alternative print stylesheets) and had always been a bit intimidated by the concept. I remember in my css newbie days trying to take a look at Doug Bowman’s source code and my head spinning just trying to find and get to all the style sheets controlling his pages, let alone understand them. So I had to think about my approach for a bit.

Sections

First, I looked at the site to determine what the main sections were that my various templates fell into in terms of sharing basic layout structure. I decided there were seven basic layouts among my 12 templates, so I started by naming them and creating blank style sheets for each.

Next I went through my main stylesheet line by line and cut anything that wasn’t needed by every single page, thus creating the foundation for my “general” stylesheet. Each item I cut was then pasted into the appropriate corresponding stylesheet section. But I often needed to paste cut items into multiple stylesheets. I quickly realized how redundant it was all getting but thought that it was worth it to have separate stylesheets that could be worked on at once.

Components

About half-way through this process I started feeling strongly like I was not doing things in the best way. Yes, it’s true that several people could now work on individual files and stylesheets, adding to them without fear of interfering with other sections, but what it someone needed to modify a component that was already in place and shared across multiple files? Those changes would only affect the templates under the direct control of that specific stylesheet. Templates using other stylesheets, even if they used the same component, would not be affected.

That’s when I understood that in addition to sections, I had to identify common components as well. These would be elements that were used again and again, but not on every page. So, now my new plan was this:

• A general stylesheet used only for styles that apply to all pages
• Section stylesheets used for styles that apply only to specific sections
• Component stylesheets used for components that show up in multiple sections but not on all sections

So I went through my original stylesheet again, cutting anything that wasn’t used in all pages and pasting the cut items either into a section stylesheet or a component stylesheet, so that I was only pasting it once. In the end I was left with 19 stylesheets: One general, 7 sections, and 11 components.

Putting it all Together

The last step was to link them. My first thought was to link to every stylesheet necessary from within the head of each document. But that seemed cumbersome … there had to be a better way. After a bit of thought, I decided to link to only the corresponding section stylesheet from within the head of each document. Then, in each section stylesheet I could import the general stylesheet, along with any necessary component stylesheets. Voila!

This entry was posted on Friday, November 25th, 2005 at 10:11 am and is filed under Tips and Tricks, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.