Can I make a custom colour definitions that I can share between CSS, JS and HTML?

Question

I have a blue-ish colour that I want to use in many places in my app and at the moment I am copying and pasting it between styles in my CSS. Is there a way of defining a constant like the standard colours, 'blue', 'red' etc. that I could share between my CSS, my HTML and my JS?

I'd like to be able to say (somewhere, preferably CSS)

myblue = #33CC99

in CSS say...

background-color:myblue;

in HTML say...

<td color="myblue"/>

and in JavaScript

tag.style.backgroundColor = myblue;

I'm guessing this is impossible and google turned nothing up, so has anyone got any ideas? I doubt I am the only person to come across this.

Answer 1

A very promising product that "compiles" higher-level expressions like variables into CSS is LESS. It needs Ruby. I haven't used it yet but it's definitely worth a look.

A more primitive way to do this would be using a server-side scripting language like PHP.

You would define constants in PHP like so:

define ("MYBLUE", "#33CC99");

and then outputting the value where needed using <?=MYBLUE;?>

Big downside: To do this in external css and js files, you would obviously have to have them parsed by the PHP interpreter, which is not good performance wise if you have a lot of visitors. For a low-traffic site, it probably doesn't matter.

Answer 2

Yes, this is impossible. You could, however, write your own CSS preprocessor (or use one of the existing ones out there), for instance with PHP. The big downside is that you would have to output the colorcode on your whole site with PHP and your scripts would look like

tag.style.backgroundColor = <? echo $myblue; ?>

and likewise in CSS

.someClass {
  background-color: <? echo $myblue ?>
}

or something similar. And that isn't really nice either. Of course you could use any server sided script language of your choice. As far as I can judge, this is the only possibility to use a color-constant throughout a whole website.

You could have a look at some processors:

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

Answer 3

To achieve this with out using any dynamic CSS (e.g. serving a PHP file with content-type text/css), your best bet is to separate out the places where you define the 'theme'.

<script type="text/javascript">
   var theme = '#003366';
 </script>

Then you can use a JavaScript file to write out styles based on the themes.

However, if you are able to use a CSS pre-processor, go with that. You'll have much more flexibility and the code will be easier to maintain. I almost always use a PHP or JSP page for CSS.

Answer 4

You may look at HAML+SASS. Though you cannot define variables for all three languages at once, these two can make writing HTML+CSS much easier.

Answer 5

How I would approach this is to make a class in my CSS.

.color_class {color: #33CC99;}

Then call it in my HTML

<td class="color_class" />

You can assign multiple classes to an HTML element.

In the JS, just name the class

document.getElementById('id').className = 'color_class';

Of course you can play with how you want to select your element. A JS library probably has even easier methods for assigning CSS classes.

Answer 6

As other users have noted you can't do this in straight HTML, JS or CSS unless you pass all HTML, JS and CSS content via a CGI/PHP/ASP script - which isn't actually a bad approach as it's easy to maintain.

If you use a query string in the reference to included CSS / JS files - e.g. '/css/stylesheet.php?timestamp=2010-01-01+00:00:00', then almost all clients will aggressively cache your CSS/JS files, negating any impact on load parsing them in a scripting language may have (though unless the site is likely to be particularly busy I wouldn't be too connected about that).

If you are using Apache (which is likely), an alternative approach would be do use something like mod_set to re-write all HTML, JS and CSS files on the fly for you. This may be more difficult to support if you are not familiar with configuring Apache (or are using another web server).

With regard to tag naming:

With either approach I strong suggest using a clear tagging system to denote your dynamic variables (e.g. %MyBlue%) and to consider having variables names be representative (e.g. %HeadingBackgroundColor%, %FontColor%, even if both are set to %MyBlue%), as that can prevent things getting hairy later on (when you discover that changing one value has intended consequences).

Using more representative names may seem unnecessarily verbose at first glance, but it causes problems in many cases because colours end up clash in unintended ways when they are significantly different from the original scheme (this is true of a lot of mainstream software which is skinnable - because the author made the assumption that %value1% and %value2% would always go together and so would %value1% and %value3% - meaning in effect the options for themeing are severely limited by an unintended dependancy).

Answer 7

I do this at build time by running my CSS files through Freemarker.

Answer 8

'#33CC99' is the same color as '#3c9', which is a nice, short easy to remember string. It will work without fiddling in html, css and scripts. I suggest that you remember it, and use it as a literal where it is needed.

You can define classes for background, text and border color:

.mycolorBorder{border-color:#3c9}
.mycolorText{color:#3c9}
.mycolorBg{background-color:#3c9}

If you want to change the color value dynamically, you can append a new style element to the head of the document with the new definitions, or use the document.styleSheets collection and replace the old rules with the new ones.

Answer 9

There's no concept of 'variables' in CSS, but I'd strongly recommend not doing what you're doing. there's no good reason that you can't define all your style information in your CSS sheet as CSS classes. If you do that, and then just apply said classes in html and javascript, that's one major load off in terms of copying and pasting.

Second, remember that you can define more than one CSS class for an element, e.g.

<div class='blue-text white-background'>my content</div>

You can then define those independantly in CSS, a la:

.blue-text { color : Blue; }
.white-background { background-color: white;}

and you can even create rules that only take effect when both are applyed:

.blue-text.white-background { color : AliceBlue; }

If you want to have the color choices dynamically generated, the only real way to do that is as others have suggested, which is either preprocess your files before deployment, or have the CSS dynamically generated and served by your language of choice.

Answer 10

I am not sure of your end goal. If it is to allow selection of one of several themes for a web page, you could simply have multiple CSS files, and a cookie/session variable/database store of the user's prefered style sheet. Then you could just do

 <link rel=<? echo stylepref; ?> type='text/css'>

or something along those lines

If you want to be able to completely customize the site, then one of the above answers would be needed.