Re: [css4-color] @color-keyword Color Keywords

You are pretty much asking for constants in CSS [1].

In terms of constants you can write all this as

@const OCHRE: hsl(6,82%,37%);

and to use it as:

a {
    color: @OCHRE; /* is the same as color: hsl(6, 82%, 37%); */
}

Constants allow to define not only colors but also any other values: 

@const STD_BORDER: 1px solid red;

div { border: @STD_BORDER; }

[1] http://wiki.csswg.org/ideas/constants

-- 
Andrew Fedoniouk

http://terrainformatica.com



From: Eli Morris-Heft 
Sent: Saturday, December 11, 2010 6:15 AM
To: www-style list 
Subject: [css4-color] @color-keyword Color Keywords

While working on a website that is about to suffer a subtle but wide-reaching color scheme change, I was thinking about how nice it would have been to be able to create color keywords for my color scheme colors. Then I recalled that I had read something similar on this list a while back, so I went and read the relevant thread in the archives[1]. It seems like there was a lot of discussion but that it didn't go all that far. So I'm throwing my proposal into the mix. This proposal is exactly what it says on the tin: a way to define new color keywords.

@color-keyword {
    keyword: ochre;
    color: hsl(6, 82%, 37%);
}

a {
    color: ochre; /* is the same as color: hsl(6, 82%, 37%); */
}

The value for keyword must be a proper CSS keyword. (Which I believe means it must match /[a-zA-z0-9-]+/.)
The value for color must be a <color>.

While I can see that this is almost exactly a proper subset of the use cases for CSS variables, there doesn't seem to be a lot of movement on variable and this is a specific use case that I feel is common enough and simple enough that a separate treatment is fine. I think that the main practical use will be to make using color schemes easier (so you don't have to remember your color's RGB and HSL values) and to make skinning and theming easier: instead of having to reproduce all the selectors for the whole site in a different file and override their colors, one can simply name the colors and swap out the CSS file that defines those colors.

Whether or not the existing color keywords can be redefined is a matter for debate. On the one hand, there is potential for bad code there. On the other hand, color keywords are already defined in this way, unless they have some magic about them. Though it occurs to me when writing this that the potential for bad code combined with the existence of magical color keywords means that perhaps not allowing existing color keywords to be used is the better course of action. That said, the proposal itself gives the opportunity for some horrible code anyway:

@color-keyword {
    keyword: cerulean;
    color: hsl(6, 82%, 37%);
}

But I am willing to take this as a price, since any variable-like mechanism can be used for bad code like this.

Thoughts?

- Eli Morris-Heft


[1] http://lists.w3.org/Archives/Public/www-style/2010Sep/0460.html