Inasmuch as both HTML and XML markup – being descended from SGML – support a nested, hierarchical structure and as CSS allows, even promotes, a stream-of-consciousness style of coding, there can be a tension between the two approaches.
To put it another way:
- If you want different styles in a couple of contexts that depend on the type of several levels of ancestor, then you get to put all those ancestors in the CSS selectors for each of those styles;
- If you want to use the same colour in multiple different styles, then, by golly, you get to enter the same
colorvalue in each of them (and if you want to change it later, you get to find them all again to do it); and - If you want to use the same set of styles in multiple contexts – say, use rounded corners multiple places and with bigger radii on the outermost corners – then you get to repeat the same set of styles while jiggering their values every place that you want them.
The CSS soon gets to the point that only a machine can reliably work out the cascading and so we require tools such as Firebug to make sense of it and present it to us in ways that we can understand.
I have previously implemented a system for a client where the template CSS file is wrapped in an XML element and contains empty elements for each of the values of color properties so the all-XML processing system can ‘skin’ the stylesheet by substituting the preferred color values and outputting proper CSS on the way to making the HTML, but that was adding complexity, not taking it away.
Enter LESS (http://www.lesscss.org/), the “dynamic stylesheet language”. LESS is pretty much CSS as it should have been, since it elegantly solves the gripes listed above, and more besides. Continue reading “CSS for the hierarchically minded”