Re: [css3] Suggestion: Selector variables or "synonyms"

On Feb 14, 2008, at 8:48 AM, Alan Gresley wrote:

> I see that we are seeing different things here and different  
> constructions. I now understand what the placeholder is. Before  
> delving into this I will clarify my part of the proposal. Please  
> compare this CSS which I currently use in a CSS styled list menu.
>
> http://css-class.com/test/demos/contant/original.css
>
> with this CSS.
>
> http://css-class.com/test/demos/contant/propose.css
>
> Please note that I have changed the #navigation from the <ul> to it  
> parent <div> to allow for the constant (my idea of operation) to  
> operate. The propose CSS has a constant block.
>
> @constant (div#navigation, div#menu, nav) {
>
> /* each selector within this block has its' own specificity plus  
> the specificity of the block that it occurs in */
>
> }

I think I understand what you are trying to do, but I would not call  
it "constant", because you are doing it all in one block. One of the  
beauties of variables and constants is that, as a small identifying  
word, it can be used throughout the code wherever its contents is  
needed. I gave 3 syntaxes that allowed that contents to be either  
selectors, sets of properties and values, or just simple values for  
any property. For selectors, it allows a list of comma separated  
selectors to be used with a series of rules.

What you show, there is one block that also allows a list of  
selectors to be used with a series of rules, but only if all those  
rules are listed together, and only if the selector text is applied  
to the front of each rule. For that, I would probably rename it as  
"@multi-select" or something. It could be useful too, but is not as  
flexible as what I proposed, and is not what is traditionally meant  
by the word "constant" or "variable" in programming languages or  
scripting.

Imagine I had the following:

	@constant DDA( div div a )

That would define a constant called "DDA", containing the selector  
pattern of a div, followed by another div, followed by an anchor.  
That could then be used anywhere in my CSS file where I can make use  
of it as part of the selector text. Like this:

div a { color: black; }
DDA { color: red }
DDA span { display: block; padding: 4px; }
div DDA { color: black; }
#navigation div, #navigation div a { color: blue; }
#navigation DDA { color: inherit; }

The rules using the constant would not all have to be together in one  
block; I am only showing them that way for the simplicity of the  
example.

> I follow the propose CSS better within the constant block since it  
> doesn't have #navigation appearing everywhere. The complexity of  
> the stylesheet when chaining each of div#navigation, div#menu and  
> nav together is greater.
>
> http://css-class.com/test/demos/constant/original-added.css
>
> The differences in size between the stylesheets is very small:
>
> original.css = 4.62 kb
> propose.css = 4.75 kb
> original-added.css = 6.70 kb

While space savings is one aspect of constants, it is not the primary  
reason to use them. It is also for flexibility, code readability,  
convenience, and being able to make later sweeping changes throughout  
the file by changing one value.