Home arrow Style Sheets arrow CSS Constants

CSS Constants

One feature designers often wished they had with style sheets are constants –- the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
May 09, 2005
  1. · CSS Constants
  2. · The CSS standard compliant approach
  3. · Using ID Selectors and Descendent Selectors
  4. · Moving server side
  5. · Using Server Side Scripting Languages
  6. · More examples
  7. · Parsing CSS with PHP

print this article

CSS Constants
(Page 1 of 7 )

A constant nagging

When reading CSS related forums or mailing lists, you’ll sooner or later find someone asking how they can define a “constant” in CSS –- something to define once in the CSS document and reuse throughout it.

There are several reasons why there are no constants in CSS:

  • The CSS specifications didn’t plan for any constants, variables, loops or conditions simply because CSS is there to describe the visual presentation of a document, not programming logic. The same applies to HTML –- there are no variables, constants, loops and conditions. Its job is to describe what a certain text is, within this document, regardless of what variables were sent to it.
  • CSS is “executed” on the client -– the browser. Browsers on slower computers already have problems rendering CSS properly. Fixed positioning and big background graphics can cause delays and flickering. What would happen if they had to process the “CSS logic” on top of that?
  • Any scripting on the client side is, however low, a security threat and allows for exploits. Microsoft Internet Explorer’s ability to embed Javascript in CSS files proved that.

However, CSS constants could be something very handy indeed.

Possible Uses

CSS constants would make it easier to turn style guides into CSS and allow for smaller style sheet documents without much repetition. You define the colors once and add the constant name every time you want to use it.

/* Company Colours */ 
        border-bottom:1px solid $green;

White-labelling and redesign would be a breeze; all you need to change is the constants, and all the styles comply with the new colors. No more search and replace sessions, and the inevitable setting that escaped them.

Another option would be to define often used styles and keep the document shorter.

$boxstyles=’background:#ccc;border-top:1px solid #eee; 
border-left:1px solid #eee; border-right:1px solid #aaa;
border-bottom:1px solid #aaa;padding:.5em;margin:.5em 0’;
div#extras div {

Since CSS does not allow for that, we need to find a way around the problem. One is to use what CSS does provide us with.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials