Re: [Bulk] @with -- DRY syntax for nesting selectors

> -----Message d'origine-----
> From: Marat Tanalin | tanalin.com
> Sent: Monday, January 09, 2012 2:29 PM
> To: www-style@w3.org
> Subject: [Bulk] @with -- DRY syntax for nesting selectors
>
> One of features most demanded by web developers is grouping/nesting
> selectors DRY way.
>
> Current CSS syntax is far from being DRY since it forces web developers to
> inevitably repeat themselves again and again and again by repeating same
> parts of selectors multiple times.
>
> I propose following convenient syntax:
>
>     @with (selectors) {
>         rules and @with's
>     }
>
> where:
>     * selectors means a selector or multiple comma-separated selectors;
>     * rules are CSS rules;
>     * @with's are nested @with at-rules.
>
> Let's consider following example CSS code:
>
>     #example .foo .bar {background: #ccc; }
>
>     #example .foo .bar > DIV,
>     #example .foo .bar > P {color: #00f; }
>
>     #example .foo .bar > DIV > A,
>     #example .foo .bar > DIV > STRONG {font-style: italic; }
>
>     #example .foo .bar > DIV SPAN {color: #a00; }
>
> With the proposed syntax, the code would get more DRY, compact, readable,
> and eventually much more maintainable:
>
>     @with (#example .foo .bar) {
>         :this {background: #ccc; }
>
>         :this > DIV,
>         :this > P {color: #00f; }
>
>         @with (:this > DIV) {
>             :this > A,
>             :this > STRONG {font-style: italic; }
>
>             SPAN {color: #a00; }
>         }
>     }
>
> As you can see, :this pseudoclass points to selector of immediate containing
> @with and is used to attach declarations to @with selector itself as well as
> to use in conjunction with child combinator (>). Descendant selectors do not
> need for :this since they are automatically resolved in context of subject
> selectors of their corresponding @with.
>
> We actually could use even more DRY/compact syntax where :this is implied:
>
>     @with (#example .foo .bar) {
>         {background: #ccc; }
>
>>  DIV,
>>  P {color: #00f; }
>
>         @with (:this > DIV) {
>
>>  A,
>>  STRONG {font-style: italic; }
>
>             SPAN {color: #a00; }
>         }
>     }
>
> It'd perfectly OK for me, but is not as critical (though would be desirable
> anyway) as conceptual ability to prevent repeating selectors as such.
>
> Compared with existing nonstandard solutions like LESS or SASS, the syntax
> proposed above avoids mixing declarations (property/value pairs) and rules
> on same nesting level (such mixing is generally a bad idea, and this is
> implicitly proved out, for example, by the fact that we don't have this in
> CSS standard so far).
>
> Thanks.

09.01.2012, 20:06, "François REMY" <fremycompany_pub@yahoo.fr>:
> This is rougly what was known as "scoped styles". I don't know where we are
> with this at the moment, however. The idea was to modify the root of the
> tree.
>
> @scope (.message) {
>     :root { ... }
>     .text { ...}
>     button { ... }
> }

Thanks, it's good in general that similar syntax has crossed one's mind too.

However, for me, redefining ':root' pseudoclass depending on specific scope is not a quite good idea from perspectives of both potential confusions and backward incompatibility.

I think ':root' should always consistently point to root element of document (e.g. <html> for HTML documents). Furthermore, in JS querySelector()/querySelectorAll() methods, ':root' already means root of document and thus cannot be redefined in spec without breaking backward compatibility.

On the contrary, scope-level nature of ':this' pseudoclass is very intuitive and logical and is free from such issues.

In turn, using '@scope' as name for the selector-grouping at-rule seems to be undesirable since it could result in confusion/conflicts between HTML5 scopes defined with 'scope' attribute and CSS scopes defined with at-rule.

So '@with' name appears to be more intuitive and straightforward.

Received on Monday, 9 January 2012 17:02:38 UTC