W3C home > Mailing lists > Public > www-style@w3.org > February 2008

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

From: Alan Gresley <alan1@azzurum.com>
Date: Wed, 06 Feb 2008 12:31:16 -0700
To: www-style@w3.org
Message-ID: <20080206123116.34b83c2f3c9bef00757a2c62c0fb7450.067e6b9401.wbe@email.secureserver.net>

Jens Meiert" wrote:

> The basic idea is to syntactically allow definitions like
>
> E = F;
>
> ... so that rules matching E would match F as well (and the other way around), while variable (or synonym)
> declarations could probably be located at the beginning of a style sheet or within a certain @-rule.


At first though I could see

E = F; F = D; D = E;

which looks quite scary.


> A more advanced step allowing for even more benefits is to allow selector grouping and a specific placeholder syntax as well, as in
>
> E = F, G;
> @H = I;
>
> ... where @H wouldn't mean a "regular" selector but a "placeholder" only viable in style sheets and requiring
> a "regular" selector equivalent.


I don't quite understand this.


[...]
> Extensive use of contextual selectors and/or long ID and class names usually resulting in less clear style sheets might be avoided by selector variables.
>
> Example: "@foo = #navigation li a"
>
> * Improved CSS efficiency:
>
> Not talking about possible compression tools, style sheet size might easily be decreased by "compressing"
> long selectors through variables - without style sheets necessarily getting less readable or
> understandable.
> --
> Jens Meiert
> http://meiert.com/en/


This I follow, an example:

@rule #navigation {
ul { list-style: none }
li { list-style: none; float: left; }
a { display: block; width: 7em; }
/* etc */
}


The following menu (server seems to be down at this moment).

http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm

has #navigation repeated about 40 times in the embedded CSS. I really should have the ID on the wrapper div instead of the initial <ul>. Then I could have.

@rule #navigation = (nav) {
ul { list-style: none }
li { list-style: none; float: left; }
a { display: block; width: 7em; }
/* etc */
}

since <nav> is a new element proposed in HTML 5, I could style older pages with the element <div id="navigation"> and newer pages with the element <nav>.


Alan

http://css-class.com/
Received on Wednesday, 6 February 2008 19:31:41 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:01 GMT