More CSS for large websites
March 29, 2008
I want to continue with my thoughts on creating and maintaining CSS on very large websites. In my last post on the subject, I mentioned that there are at least ten different layout conventions that I deal with on a regular basis.
For what it’s worth, I want to add a little context and say that those layout conventions (and ten is a rough estimate) power somewhere around four hundred pages, give or take a few. Certainly, the website is much larger than that number, but again those are the ones with which I have significant interaction.
Again, none of this is new to someone who works on a very large website, but all of it was new to me. In light of this, I want to shed a little more light on some of the techniques I use or have used.
Structured Sections of Styles
I began to practice this technique when most of my days were spent working with relatively small sites, that typically had a total page number of less than fifty. However, many stylesheets don’t do this, so I think it’s worth mentioning.
Structuring sections of styles allows the designer to keep things in logical places within the stylesheet: such as layout styles, link styles, typography, browser fixes, and so on. An example goes like this:
HTML:
[prism key=”layout-a” language=”markup”]
[prism key=”layout-b” language=”markup”]
CSS:
[prism key=”css-1″ language=”css”]
Thus, styles become very nicely organized and can easily be found by another designer, or a developer, or someone learning from your source code.
Multiple stylesheets
Most large websites already do this, but it is important to mention that multiple stylesheets are an amazing organizational tool, beyond (but not replacing) the need to structure the stylesheets themselves.
Example:
[prism key=”head” language=”markup”]
For myself, I use Eric Meyer‘s great reset stylesheet to remove default browser styles (as well as, in my case, default styles from the CMS that conflict with my needs). There are several others around the internet. Use whatever fits.
In my situation, several different business units have very different styles for their respective sections of the website. So, its beneficial to add these in separately when they do not overlap. Often, each business unit has several different layout conventions, hence the use of layout-a and layout-b, and so on.
Calm down
Unfortunately, most large websites do not validate, neither in their HTML or their CSS. This can be a constant source of frustration for standards-aware designers and developers. Multiple people may maintain the code. Some of them may be serious back-end programmers who don’t care about what the browser actually receives at all. Others may be non-technology people who barely know what a browser is, but have the responsibility of maintaining code for one reason or another.
And that has to become okay, at least to an extent. Otherwise, jobs become depressing. Certainly, work for better support of web standards. Push the fact that even the IE team wants to support standards. Push for accessibility, and the fact that major websites are being sued for accessibility violations. These things are important.
But every once in a while, take a flight for a few hours. Rejoice in the fact that, at least for now, people can’t call your cell phone and tell you that the world is ending, and expect you to do something about it. They’ll have to wait till you land.