Efficient CSS for large websites

I could see this becoming a series of posts, but for now I’ll start with one. I spend my days, to a large extent, dealing with HTML and CSS on a very large website.

I used to spend the majority of my days dealing with XHTML and CSS in relatively small websites. Rather than having, say, four or five different layout conventions, I now deal with at least ten different layout conventions. There are sections of the site that are of varying ages, and sections that were designed at different times and by different people in the company’s history. Any very large website is likely to have these kind of issues.

One of the results of this shift in my work situation is that I now have very large stylesheets. While there is a large amount of re-used code, re-used styles, and so on, there is so much going on that it is difficult to have efficiency.

There are a number of CSS frameworks that have come out in recent years, from YUI to Blueprint to others. This trend is similar to the trend of JavaScript libraries, of course, and it is seen as both a good thing and a bad thing, depending on how it is used.

One of the things that I have lately begun to make use of, though, is the YUI convention of creating several different layouts based on one selector. Thus, we might have the following:

1. <div id="wrapper" class="layout-a">
2. <div id="subContent">
3. <p>content</p>
4. </div>
5. <div id="mainContent">
6. <p>content</p>
7. </div>
8. </div>

1. <div id="wrapper" class="layout-b">
2. <div id="subContent">
3. <p>content</p>
4. </div>
5. <div id="mainContent">
6. <p>content</p>
7. </div>
8. </div>

The benefit of this is that layout-a and layout-b can share an identical structure in their HTML, and be styled to match almost any layout convention with less code and more efficiency than, for example, creating different divs for all of the sections.

Any styles that are shared between the layouts are, of course, shared. They don’t have to target layout-a or layout-b. As I begin to implement this, I find code becoming more efficient and I feel that it would be much easier for someone else to come along and have to deal with it.

When I first began working on this type of site, I was very good at HTML and CSS, but apparently I was not very efficient. This degree of efficiency simply wasn’t necessary, although it certainly could have been beneficial. I post all this because I have a feeling that I’m not the only one who could benefit from this kind of thought shift.

• 28 Mar 2008
• Comments 1
• Posted In CSS, design