CSS Kung-fu, or, Techniques for CSS/HTML Systems Analysed Site Designs
Frequently, even today, CSS is seen as something used to 'pretty-up' an HTML document. Although, using the Cascading nature of stylesheets, CSS can be used as a powerful logical tool.
Using a few simple techniques, you can take all the good work you've done in your analysis and simply implement it – what's more, and possibly better from a business point of view, someone else can as well.
These are the four methods I've found useful:
- Control the style hierarchy
- Use multiple stylesheets
- Separate out colour and typography when possible
- Switch layouts and styles based on body declarations
Control the style hierarchy
If your site design requires you to manage multiple layouts whilst keeping a consistent graphic design, one of your main tools will be specificity.
Specificity
This is covered well elsewhere, but in short, it will mean that you if your style declarations are over-specified, then your elements are less likely to be overwritten by other developers' changes. In effect you are 'sandboxing' your work.
The flipside to this is that if your declarations are over specified, you may have problems adding a change in the case of a deviation from the style norm.
Style order
An alternative tool is simple, but likely to cause problems: styles declared later in the series of stylesheets will (if they have a matching or lesser specificity) 'overrule' the previous style. This can be useful if your analysis methods give you several ways of defining an element: for example an exceptional instance of a functional element module – this might have an id and a class name. The problem in this case is that you've run out of style defining element attributes to differentiate your pesky exceptional element.
In these rare cases, you can add an extra class. According to the specification, you should be able to refer to this via a style declaration targetting an element with several class names, e.g.:
p.error.reference { font-weight : bold; font-style : italic; }
This, of course, doesn't work in Internet Explorer 6. In this case, the 'second best' choice it to refer to the class values individually, and make sure the second value appears later in the code.
Use multiple stylesheets
A very simple but effective way of filtering out your CSS is to use multiple stylesheets. This can either by importing stylesheets in a hierarchical fashion, or by calling an 'override' stylesheet on a per page basis. A combination may be effective.
Using @import
This method allows a single file to be linked to in the head of each document. This document could contain general styles, and (at the beginning of the file) a series of @import declarations, calling in separate files, for different purposes (typography, layout, themes).
Using per page stylesheets
The advantage of this method is that all styles for every single page's peculiarities do not need to be downloaded until needed (if by some misfortune there are a lot). Having said that, a single stylesheet for every page goes against the concept of having a single stylesheet for a whole site, that needs to be downloaded only once and cached.
In a complex site design, the exceptions to the general rule on a per page basis could be declared in a seperate stylesheet, linked to after the initial stylesheet link for the whole site.
This could be used in conjuction with an id on the body tag, thus increasing the specificity of each style declaration.
Separate out colour and typography when possible
Separating colour and typography allows general properties of all elements sitewide to be changed in a single location.
Using this method, though, it may well be hard to find all the declarations for a particular item. Having said that, if your declaration covers just one instance of a class of item, then this should be less of a problem.
Switch layouts and styles based on body declarations
Related to, though not the same as Andy Clarke and James Edwards' 'Invasion of the Bodyswitchers' CSS/Javascript body switching, the concept of applying differing layouts to the same content, is a realatively straightforward thing to do. It relies on applying an id to the body tag of the page (or to a wrapper div if you are not allowed access to the body tag) and using the higher specificity to apply a differing layout to identical HTML modules lower down in the code.
For example, if you had two columns that on hub pages had the main content on right and a navigation on the left, but on product pages had the main content on the left and a highlighted specification column on the right, you could set the body#hub_page div#main_content to float:left, but body#product_page div#main_content to float: right.
Another example would allow a different colour theme to be applied to differing sections of the site.
This would require a fair amount of forethought to get right, but with sound CSS Systems Analysis documentation, the modularity of the HTML will make the developers' lives easier, and will allow for flexibility within the design.
