Algorithmic style sheets
I wish CSS had a few of the features that algorithmic languages have. I’d love to have variables (or even macro substitutions).
Every good visual design uses just a few colors: a primary color, a highlight color, and a few different saturations of those colors. Right now, I’ve got to have literal color references strewn throughout my style sheet. If I want to change the highlight color and its low saturation variants, I’ve got to dig through my file to find each use of those colors and replace them. I could group all my color definitions together, but I still find that I often miss one, then have to sift through a bunch of unreadable hex strings like #5F1A80 to find the problem color. I could use find/replace, but I still have to look up the hex string to search on.
Since I’m used to code more than scripts, I’ve got the habit of defining all constants and literals up at the top or in a header so that I can change everything in one go. I’d love CSS to have variables for exactly this purpose. I could define those colors at the top, then use references to them in the style definitions. I’m not limited to colors either - I could use variables to set standard layout properties like the padding around all boxes or border widths. Then, I could change the entire layout look of the site by editing a few constants on a few lines. It would make the code a lot more readable too.
For example,
{
border-width: 0 5px 5px 5px;
border-style: solid;
border-color: #000000;
}
would become
{
border-width: 0 $PAD $PAD $PAD;
border-style: solid;
border-color: $ALT_COLOR;
}
For now, I’ve resorted to using the good old C pre-processor (how old school!). I stick a bunch of #defines at the top and life is good. It’s a bit of a pain because I have to “build” my style sheet.
If anyone’s got a better way to do it, I’d love to hear it. I’m no HTML/CSS guru.
