Variablize a CSS class?

Question

I want to include a class within a class - sort of like variablizing a class - so that I can define something once and use it throughout the sheet. If I change the color, it changes everything.

.myFontColor{color:blue;}
.myTitle{font-size:large; myFontColor}
.myHeader{font-weight:bold; myFontColor}

The only way I see to do this is. To include every class name in the definition, but if I have 20 or 30 items in the sheet referring to that color, it's going to get ugly really fast.

.myFontColor, .myTitle, .myHeader{color:blue;}
.myTitle{font-size:large;}
.myHeader{font-weight:bold;}

or to list a each class when I create an element, which gets a little messy too.

<div class="myFontColor myTitle myHeader">

Thanks for your help.

Answer 1

Variables (as you need them) are not possible in CSS at this time. You would have to use the Cascade, as you have done, and include all of the classes in the definition.

Answer 2

You can write several classes when defining an element:

<div class="blue w210pt">
</div>
<p class="green w210pt">
</p>

<style>
.green{color:green;}
.blue{color:blue;}
.w210pt{width:210px;}
</style>

Answer 3

You may want to take a look at Sass, something from the Rails community that makes you use a slightly different syntax but allows for some smarts like this. If you're not doing the Ruby/Rails thing, you can still use Sass as a command-line preprocessor to translate your Sass files in to CSS.

Answer 4

As you suspect, you can't do what you describe in a direct way -- you need to use the cascading aspect of CSS to get what you want. However, I think you may be misusing CSS to some degree. You should be defining semantics and then connecting your presentation to those semantics. For example, seeing a class like .myFontColor would be a big hint that you're not really using classes to represent semantics (although I recognize this is probably simplified for the example).

Answer 5

The only way I can think of would be using javascript to dynamically assign the attributes. For example, make a list of all the attributes that you want to configure (such as color, font-size, font-weight) and a list of all the classes you want to be configurable (such as .myHeader, myTitle, etc). Then do something like this:

for (x=0; x< cssClasses.length; x++)
{
  addAttribs(cssClasses[x]);
}

function addAttribs(class)
{
   $("." + class).css("color","#444");
   $("." + class).css("font-weight","bold");
   //And so on..
}

This may be the closest you can get, and it will have the advantage of all the attributes stored in one function, so if you change it there it will be updated everywhere else.

Edit: By the way, I'm using Jquery in the addAttribs() function to easily access and set the css attributes.

Answer 6

The most simple solution to not repeat declarations is to combine a few classes, as you know.

Maybe are you looking for css variables?

Answer 7

You can also use a server side solution like php (or any other you have access to).

Using php you would save the style-sheet as a php file which would get "executed" every time it is requested. You could put all your variables on top and echo them where ever you need them.

The browser sees a normal style-sheet, but the server would have some extra work to do. And it does not really improve the readability of the style-sheet...

Not a very elegant solution, but it works.

Answer 8

One solution is to use a PHP stylesheet:

<?
header('Content-type: text/css');

$color1 = '#123456';

echo <<<EOS

.myTitle {color: $color1}

EOS;
?>