Faster Development with CSS Constants

25 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Rachel Andrew

    @ Jorge – I think it’s a fairly rare thing that you might want to expose some of the CSS to the site admin, but I’ve had just this situation recently at work. The method we went with was generating static stylesheets (using PHP) for each color theme (the admin could set 3 main colors, background image and repeat) and it works well. It’s a very specific usage though. However, what about creating a photo gallery site where photographers can customize their album page by changing the background and color theme? Sites like Yahoo Groups enable the group owner to customize the color scheme to an extent to individualize their community so I think there are places where generating CSS is useful and appropriate. I don’t think it’s something you’d want to sling into every CMS though!

  2. Peritus

    How about

    h1 { font-size: 200%; }
    em { font-width: bold; }

    /* blue stuff */
    h1, em, ul#head li, ul#head li li { color: rgb(0,0,255); }

    Would be it, ha ? And even without server side scripting and with no redundancy.

    so long,
    Peritus

  3. Sebastian Steinmann

    >Peritus:
    >h1 { font-size: 200%; }
    >em { font-width: bold; }

    >/* blue stuff */
    >h1, em, ul#head li, ul#head li li { color: rgb(0,0,255); }
    Imagine how messy that would become on even a smal scale projekt. – I cant see why CSS dont have constants by default tho. That would have been one of the first things I’d put in. And it doesn’t seem like it will be added. A shame.. – whats up with no quote markup in comments? No markup at all!

  4. Fabrice Delaneau

    A bit out of this topic but might be helpful for the PHP part :
    Real constants, not variables, exists indeed in PHP

    define(“CONSTANT_NAME”,“constant value”);

    I usually use it to define the installation path of my sites, this allows me to easily move a site into subfolders.

    define(‘INSTALL_PATH’, ‘/folder-name’);
    $url = INSTALL_PATH.’/path/of/the/files’;

    Also, the constant name doesn’t need to be in full uppercase but it makes it easier to spot in your code later.

    As for the CSS constant this seems a nice to go, specially on big files or if you work in a team.

  5. Mike Papageorge

    To follow from Fabrice, what you have in that first code snippet is not a constant but in fact a variable. Variables can change (they are variable), constants are constant.

    Anyways, enough picking nits, CSS constants are very useful!!

  6. Ange

    Great article. I’ll try this.
    Every CMS are capable of managing article but not of CSS itself.
    I wish I could edit CSS dynamically using PHP through CMS.

  7. Douglas Clifton

    The comments about variables vs. constants are quite correct. Also, I wrote a little more detailed article on the technique of using PHP to generate CSS on Digital Web. Check it out if you’re interested:

    http://www.digital-web.com/articles/generating_dynamic_css_with_php/

  8. Rachel Andrew

    A ‘constant’ is a fixed value that cannot be changed at run-time – if the values you are setting are fixed as in the examples above then I think constant is the correct term. If you are allowing them to be altered by the user – for example dynamically setting a background color – then you would be correct in calling them variables. My primary reason for using the word constant over variable is that most of the existing discussion on the web uses ‘CSS Constants’ as the term to describe this concept, I find it helps if you give someone a phrase they can search on and get results.

    @ Douglas – thanks for the link to the article, that’s another useful resource for this.

  9. Jens Nedal

    Hi,

    I mostly agree with the discussion about constants and also i do like the idea behind it. It certainly is something you will need to use when you offer the community of a site to change style values according to their preferences. Otherwise i would not so much try to mix any other scripting language together with CSS.

    I would love to have CSS constants, agreed. Just creating a workaround so that i have it simpler with color values sounds a bit overshot for me though. You might be using those colors, or CSS definitions multiple times, but unless there are real constants i would certainly not try to splice PHP into that mix.

    I think this is a very specific use and it should NOT be adapted for daily use on the usual flok of websites.

  10. Drew McLellan

    Without wishing to draw the pointless debate out further, the concept of a constant exists regardless of any particular features of any particular language. It’s a value that you set once and then get many times. Some languages give you protected ways of doing that, some don’t. You can use those features if you wish, or choose not to.

    Either way it’s a completely irrelevant tangent, so let’s drawn a line under that particular debate, folks.

  11. Jero

    Wow, don’t mix CSS with PHP (or any server side scripting language for that matter) unless you know what you’re doing. Using a generated CSS file really increases the amount of bandwidth being consumed. This is because static files (like normal .css files) are cached while generated files are not. So if you go to a website that generates the stylesheet using a server side scripting language, you have to download the stylesheet every time you visit a page on that particular website. If this website chose to use a static file instead, this would not be the case because the file would’ve been cached. Therefore, if you choose to generate your stylesheet using a server side scripting language, make sure you implement a good caching mechanism.

    On the other hand, I do agree that CSS should have an option to declare constants. Unfortunately, the W3C doesn’t think this way, judging by this message.

  12. engtech

    I hacked the CSS for my site for the first time last week, and I was amazed and disappointed that the language didn’t include constants.

    It makes so much sense.

  13. Drew McLellan

    Jero, you’re right that if you’re generating the CSS at runtime you need to make sure you’re serving it with the correct headers. Depending on circumstance, I think the more common scenario is to generate your CSS when it changes and save that as a static file on the file system.

    Just as with any server-side scripting, it’s wasteful to generate the same file again and again when you know it hasn’t changed. The exact same statement applies to generating an HTML document.

  14. Monika Szczygie?

    Long time ago in a galaxy far, far away… wait, that’s a completely different story. Let’s start again: in the past millenium I used something called HSC. It was an HTML preprocessor, that gave me an idea for the solution, that works for me now.

    Needed tools:

    * SVN (or any version control system of your choice; it’s not essential, but you’ll still have to use the scripts …and after all, what sane person doesn’t use some VCS anyway?),

    * conversion table – e.g. in (keyword:value\n)* format,

    * custom commit script that runs keyword->value conversion on *.css files and then commits,

    * second script that converts value->keyword on update.

    Instead of svn commands, I use the custom scripts as Total Commander buttons or CLI commands. This way I have the keywords where I need them (my working copy) and keep the code in repository clean, so no server-side scripting is needed.

    The scripts can use local (every developer may have own keywords in her/his working copy) or global conversion table.

    You can use it for more than colours (i.e. images), but it may be not 100% update-safe.

    Of course there are some limitations:

    - you have to commit changes to see them (not a minus for me, but you may want to create a script that will export a local preview),

    - lossy conversion on update (you can’t have more than one keyword for one value),

    - you can use the keywords only in external style sheets or face a serious mess if you try to run the conversions on all files (again, not a minus for me, and in my library I have header_style() and inline_style() functions that use the global conversion table if I really, really need it; not recommended, though).

    Hope someone finds this helpful.

  15. Harmen Janssen

    Just a quick thought:
    When using the first technique of including a color glossary, make sure you use full hexadecimal values, not the 3-character shortcuts.
    Searching and replacing “#666” when you also use colors like ‘#666000’ would be disastrous ;)

  16. Halans

    Don’t get it. Didn’t we learn in css to not use specifics like “darkgrey” or “leftnavigation” or “blueheader”...? Now you add $darkgrey to your css file. If you want to change that to dark blue wouldn’t you need to replace all the $darkgrey with $darkblue? Or change $darkgrey = ‘#333333’ to ‘#000066’ but then it isn’t darkgrey anymore.
    Wouldn’t it make more sense naming your constant $textcolor (or just $color) or something?

  17. Drew McLellan

    Halans – that’s a fair point, I think. Using semantic names for the constants is probably a good idea.

    However, there’s a big difference between naming constants within a CSS file and choosing class names or IDs within a document. A key idea behind separating content and styling is that you can change one without affecting the other. You can redesign your site (to turn the greys blue or whatever) by attaching a new stylesheet to the document. That stylesheet in turn would have its own constants with their own names.

    Those constants are restricted to the scope of the stylesheet where they are truly appropriate. The presentation layer (CSS) is exactly where it’s okay to talk of how something looks.

  18. Steve Clay

    Since you might use the same color for two different “constants”, it’d be safer to append a comment to each value:

    body {color : #ffffff /*mainTextColor*/; }
    ...
    p {color: #ffffff /*secondaryTextColor*/; }

    Now when you want to alter just the “mainTextColor” you’ll be able to do so w/ find/replace.

  19. Skippy

    If you’re going to mix CSS with PHP you’d better do it right. :) If you control the server you can use more fancy methods, but you’d be well advised to turn your .css files into .php on shared hosting.

    One (obvious?) benefit is being able to define constants or variables. Colors are just one application. Another are widths, be they pixels or percentages or whatever. Define your main content area as 75% and your sidebar as 25%, or the main as 400px and the sidebar as 120px and you can use PHP to spread those values all around the CSS and even do calculations on the fly based on them.

    Another great benefit is adding HTTP headers for gzip compression and timestamping, to facilitate caching and to reduce bandwidth. CSS is pure text so it compresses very well. You’ll be able to reduce that 20k CSS file to only 1-2k that each visitor has to transfer.

  20. Andrew Hedges

    It seems like what you’re really talking about is the ability to easily change things globally. Something I do that makes this easier is to have sections in my CSS for color information and font information, so that at least these attributes are grouped for easy editing. This could be taken further by grouping other attributes such as borders, layout information, etc. When all of your colors are in one, scannable section of your CSS, it’s relatively easy to make a global change.

  21. Bernie Zimmermann

    I posed the question as to why constants aren’t supported in CSS to Hakon Wium Lie, the “father of CSS,” back in April…and he answered:

    http://www.bernzilla.com/item.php?id=666

  22. Richard

    I am fairly ambivalent towards the use of constants generally in CSS due to the convenience vs performance dilemma however I do believe that constants should be allowed in the case of the following statement type:

    background: url(https://10.10.10.10/img/myimage.png) bottom right no-repeat;

    where one references external image files within the CSS file itself – in my opinion it is completely redundant and potentially dangerous to have to re-reference a path location again and again if you are using a particular path to store image files in that are referenced as styles

    In fact in this context i feel fairly strongly that one should be able to pass parameters in the CSS file call as it would then allow one to flexibly determine where external files called from within the CSS file will live …but alas i is not to be

  23. Jorge Laranjo

    Hi Rachel. I read this article and I agree at some point, but for a principle I believe that CSS don’t need to be mixtured with PHP or other scripting language. Why? I just use the ‘find & replace’.

    >‘using a combination of CSS and server-side scripting you could enable a site administrator to select the colours >for a new theme to be used on a page of a content managed site.’

    I really don’t believe that the ‘site administrator’ can be mixing colors. I do believe that is the job of the designer.

    Btw, I just bought your book HTML Utopia: Designing Without Tables Using CSS and I’m loving it.

Impress us

Be friendly / use Textile