Constants In CSS

From CSS Discuss

Jump to: navigation, search

Periodically, someone asks if CSS includes the ability to set constants or variables that can be reused throughout a sheet. The main usage of this is for declaring a color value once and being able to call it up in an unlimited number of rules. So, you could declare "branding-color is #f0a3b5" and then be able to write rules like this:

h1 { color: branding-color; } a:hover { color: branding-color; }

Then, if the color changed, you would only have to change it in the original value declaration and not in every CSS rule it was called in. So, does CSS let you do this? No. CSS is not a programming language, so it doesn't include this type of logic. But there are some workarounds.

Contents

Option 1: Search and Replace

The simplest option is just to include the color value in every rule you want it in, and use search and replace when you want to change it. This is pretty trivial with a good text editor.


Option 2: Create a Class for the Constant/Variable

Since an element can have more than one class on it (see Multiple Classes ), you can make classes for each constant or variable you want to create, then assign these classes to the (X)HTML elements you want to affect. Since an element can have more than one class on it, this shouldn't interfere with any existing uses of the class attribute.

for example:

.branding-color {
color: #f0a3b5;
}

and your (X)HTML:

<h1 class="branding-color">Heading text</div>
...
<ul class="branding-color news">
  <li>News text that shares same color as heading text.</li>
</ul> 

Then if you want to change the color, all you need to do is change the class definition.

Disadvantages

  • If used extensively, the (X)HTML can get pretty bulky with all those extra classes assigned.
  • The author has to remember to assign the correct class. This can be especially problematic if the content creator is not the same person who created the CSS (an unknowing client, for instance, who is maintaining her own page) and has to be told when and where to add a class.
  • Not all browsers support this.


Option 3: Use a Server-Side Language to Write Out the CSS

The use of templating languages would make this easier than doing it in a regular editor.

"...e.g. In PHP (if you run PHP on the server, rather then before you upload the style sheet, make sure you have it output the correct content (MIME) type for your style sheet),"

<?php $dark = "#000000"; ?>

#foo {
  background: <?=$dark?>
}

I could also imagine a PERL one-liner for inplace editing, but I want to test the syntax before putting it here. The solution with a normal search and replace would have the advantage (or disadvantage) that regular color-codes could be used for quick development and all of the **identical** codes would be changed. Also, inverting a color-scheme would require a "three-way-exchange" of values. (After changing original white to black, how could you change original black to white? So you need to change #fff to NU-BLACK, then #000 to #fff and then NU-BLACK to #000)

To change the MIME type of a Cold Fusion (*.cfm) file to CSS:

<cfsetting showdebugoutput="no">
<cfcontent type="text/css; charset=UTF-8">

... and the same in JSP:

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<c:set property="contentType" target="${pageContext.response}" value="text/css" />

NB: with the JSP one I am not entirely sure of the use of 'target'

Examples

Disadvantages =

  • CSS is not cached (but this can be worked around?).
  • The CSS author needs to know the programming language.
Personal tools