[css3] Suggestion: Selector variables or “synonyms”

Apparently, Carmelo Capinpin already suggested the concept in 2006 [1] (with few success, unfortunately [2]), but I may propose to consider something like “selector variables” in CSS 3 again in order to help both maintainability and style sheet efficiency.

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.

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.

While current selector grouping already covers some use cases of these variables, there are a few specific benefits to them (omitting “when used right” and cutting examples):

* Improved maintainability and “refactorability”:

  Currently, the wish or need for ID and class name changes can only be addressed when both markup and style sheets are changed. Selector variables could not only offer faster changes and better maintainability by allowing “change CSS now, HTML later” cases, they could also mean a helpful precaution, for example, when IDs/classes are changed “anywhere” but authors are not or can not be sure if relicts are still around, or when they need to tolerate delayed changes on partner sites using the same CSS files. (Talking complex projects, this is.)

  Example: “.old = .new”

* Improved style sheet clarity:

  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.

Judging this concept to mean a significant improvement, I ask for feedback and “reconsideration”. I'm especially curious about the impact of remaining or probable issues like scope of variables regarding imported style sheets, processing, or rendering performance, but would love to help anyway, and be it by providing additional examples and use cases.

[1] http://lists.w3.org/Archives/Public/site-comments/2006Dec/0006.html
[2] http://lists.w3.org/Archives/Public/site-comments/2006Dec/0007.html

Jens Meiert

Received on Wednesday, 6 February 2008 16:28:59 UTC