This article is really cool, I never used constants in CSS, but now reading this I think it can be very usefull

Thank you!

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.

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!!

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.

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/

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.

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.

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.

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.

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.

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.

Wow !
I didn’t want to start a debate, just pointed out a useful function in PHP.

Sorry for that.

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 ;)

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?

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.

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.

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.

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

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

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.