CSS “variables”
CSS is annoying me at the moment. I want to be able to define semantic colour constants. Then I just need to make any changes to the constant and not do a search and replace operation on hexadecimal colour strings, which may affect more than I want it to. In LaTeX, which is for typesetting documents, I can do this easily: I recently created a new command to colour one type of construction purple and another green when I was creating my poster for OxMorph1. I changed my mind a lot about what colours should be used for these constructions, but I only needed to change the colour used in one place for each construction. What could be easier? But how can this be done in CSS? The simple answer is, it can’t.
There’s a lot of debate out there about so-called CSS variables, but a lot of the time, I don’t think people mean variables; I think they mean CSS constants. This is referred to by this essay on why CSS variables are harmful, which states at the beginning "information should be re-usable"; yes it should, and being able to define such things as colours that can be used semantically is an example of re-use, and is therefore a good thing.
This essay talks about maintaining a style sheet over time, claiming that one with non-standard elements in it are more difficult to remember. Perhaps, but in the case of colours, are you more likely to remember a semantic name like ‘headerBGColour’ or ‘#430f81′? There’s also the example in the case of the LaTeX example I mentioned above. Furthermore, it would be useful when positioning elements to be able to specify widths and heights in one place, rather than having to keep looking round the CSS file for values that depend on each other.
Anyway, this essay talks about whether constants in CSS are necessary: no, they’re not, but they would make the life of many web programmer’s lives easier. And of you don’t like them, well, the answer’s simple: don’t use them.
That’s my two penn’orth added to the debate, anyway.
Automagically-generated possibly-related posts:
categories: Nature and Science and Tech
tags: computing, CSS
Subscribe to the 
Leave a
I have no idea what your talking about
1 said sally (7th September 2008 at 9.42 pm BST)
Two workarounds I can think of.
1. (Very Hacky): Create a CSS class for each colour that you want and define it once. Then just apply that class to each element that you want to be a particular colour. (It is possible to apply more than one CSS class to an element, just separate them with a space). Obviously this has many flaws but might work for simple things.
2. Generate your CSS using PHP. It’s fairly easy, just make sure you include a header(‘Content-Type: text/css’); line in your PHP file. You can then use PHP variables to hold the colour info and just output that at the relevant points in your CSS file.
2 said Phill (8th September 2008 at 7.44 am BST)
Sally: not to worry – I’ll get back to my usual drivel soon!
Phill: thanks. I dislike hacky fixes muchly, and in the case that led me to this rant, I can’t use PHP on that server, which is annoying in itself. But it did lead me to discover about server-side includes, so I’m letting it off slightly there. Maybe I’ll look at doing the hacky fix.
3 said Pandammonium (8th September 2008 at 9.00 am BST)