Re: [css3] Suggestion: Selector variables or “synonyms”

> > What will be most helpful next?
> Use cases. Concrete examples of where this would be needed, of
> the problems it tries to solve.

I'll try. The main problem the suggestion attempts to solve is the cost of selector changes. Currently, selector changes (above all referring to ID and class names) require changes in both HTML and CSS, “of course”. There are cases, however, where especially complex sites cannot guarantee all HTML to be changed, at least not in a timely fashion, while in these cases, selector grouping reduces maintainability (after all, the selectors in question should be changed, not extended) and bears a larger risk of getting overlooked later. Thus, improvements are either delayed or even dropped, and both cost and risk of changes are relatively high.

Selector variables could offer low-cost, instant changes without any risk of formatting and “compatibility” problems, via “.old = .new;“ or “@foo = .old, .new”, for example.

Another use case I see is the effect the (by all means desirable) way to use sequences of simple selectors has on CSS understandability and efficiency, meaning that “contextual selectors” are elegant but tend to be longer thus less understandable than simple selectors (referring to more complex style sheets again).

Example (HTML 4):

  <ul id="nav">
    <li><a href="/exit">Exit</a>
    <!-- … -->

  #nav strong {}

Assuming that the default “li”/“strong” element styling is not desired and the author wants to style indicators of “active” pages differently, the selector ”#nav strong” appears to be an appropriate choice. However, a simple selector like ”#on” would be SHORTER – but it's certainly not elegant HTML:

  <ul id="nav">
    <li><strong id="on">Home</strong>
    <li><a href="/exit">Exit</a>
    <!-- … -->

  #on {}

Although there are even less character used in the second example, it hopefully doesn't mean too much abstraction to project that on cases where the selector in question is used more than once, and that exactly is the other problem: How can style sheets get more compact while at the same time preventing unneeded HTML changes and staying readable?

As for the example above and given that our selector is used five times, selector variables/placeholders could make

  @on = #nav strong; /* user-agent just replacing ”@on” by ”#nav-strong” */
  @on {}
  @on, .foo {}
  @on, .bar {}
  @on, .baz {}
  @on, .qux {}

out of

  #nav strong {}
  #nav strong, .foo {}
  #nav strong, .bar {}
  #nav strong, .baz {}
  #nav strong, .qux {}

I hope I managed to bring that stuff a little bit forward, and I appreciate the discussion.

Jens Meiert

Received on Thursday, 7 February 2008 10:23:40 UTC