CSS variables
March 18th, 2006While making a few changes to a stylesheet today, I found myself constantly reaching for colorzilla in order to remember the specific hex or rgb value I had used for a certain class. Not only that, having to do a find-and-replace to change all instances of #b3dca3 is a pain the the butt if all you want to do is change your colour scheme.
Imagine if at the top of a stylesheet you could define some variables.
var customGreen = #b3dca3;
Then, whenever you needed that colour in the stylesheet, you could simply write:
.someClass { color: customGreen; }
This would certainly save some time, as you would not have to remember the specific hex value of the colour you require for a certain class. I feel like I spend half my day scrolling up and down my stylesheets to copy and paste existing hex/rgb values from similar classes.
I realise something similar can be achieved using classes like .customGreen {color: #b3dc3a;}, but this would require adding that class to your markup, which is not really semantically ideal. What happens if you want to change your colour scheme to blue? You could change the one reference in the stylesheet and it would work fine, but your markup will have all of these nosensical classes of customGreen that are actually now blue.
What are your thoughts? Maybe this is something that should be available for CSS4. That way I might just be able to use such a feature in about 20 years time - if and when CSS4 is implemented (or even thought of for that matter).
This entry was posted on Saturday, March 18th, 2006 at 6:18 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
May 11th, 2006 at 1:13 pm
My solution to this problem is almost exactly what you describe, but I do it in a Movable Type template:
<MTSetVar name="color" value="#025a9e">And then I use it like:
.someClass { color: <MTGetVar name="color">; }When the stylesheet rebuilds, the color comes out as static text. It seems a decent, if a non-portable, solution.
May 11th, 2006 at 6:56 pm
The exact same ideas bounced around in my head a while back (albeit a PHP version), but like you have already mentioned, it is not portable and requires server-side processing. This is not really the main goal of CSS in the first place.
Also, at least in the case of PHP, the CSS file would need to be parsed by the server in order to pick up the variable, therefore contributing to the overall speed of the pages’ delivery. This of course is only a theoretical loss in speed and relative to your particular requirements and/or server load, but none-the-less is something to take into consideration.
There are certainly a number of ‘hacks’ (for want of a better word) that can be implemented to achieve variables in CSS. If you are really keen (and don’t mind offending a few very old browsers) you can even GZIP your css after the server parses it to save a little time in page delivery.
However, all of these points take away from what CSS is all about, at least for me anyhow.
The beauty of CSS is it’s simplicity and portability, and to complicate your stylesheets with server-side tags and PHP variables as well as restrict its portability negates the whole reason for me wanting native CSS variables in the first place - simplicity!
When the solution creates more work than the problem, then it is not really a solution. I think the dream result here would be basic, native, and entirely client-side CSS variable support. But I am not about to hold my breath.
July 21st, 2008 at 4:01 am
gratis internet texas holdem…
Malayize Whittaker constrict!…