Re: @with -- DRY syntax for nesting selectors

09.01.2012, 21:46, "Tab Atkins Jr." <jackalmage@gmail.com>:
> On Mon, Jan 9, 2012 at 5:29 AM, Marat Tanalin | tanalin.com
> <mtanalin@yandex.ru> wrote:
>
>> š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.
>
> I've been procrastinating about bringing it up on the list, but Shane
> Stephens and I wrote up a document for this as well, based on the
> proposal we floated during the Tokyo f2f:
> <http://dev.w3.org/csswg/css3-hierarchies/>
>
> This is slightly simpler. šThere's no need to alter existing code in
> our proposal; rules just nest inside of rules. šTo make the parsing
> unambiguous, the nesting selector (represented in our proposal as "&")
> must be at the start of the nested selectors.
>
> So, for example, your example:
>
> ššš@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; }
> ššššššš}
> ššš}
>
> ...would be written in our proposal as:
>
> #example .foo .bar {
> ššbackground: #ccc;
> šš& > div, & > p { color: #00f; }
> šš& > div {
> šššš& > a, & > strong { font-style: italic; }
> šššš& span { color: #a00; }
> šš}
> }
>
> The advantage of our proposal is that it's more compact and less
> visually intrusive than using an at-rule. šThe major downside is that
> the nesting selector has to come at the front of the nested selectors
> to avoid ambiguity (specifically, if you see something like "a:hover
> span { ... }", you can't tell whether you're looking at a selector or
> a property until you hit the "{"). šUsing some explicit indicator of
> nesting like an at-rule would remove the possibility of ambiguity,

That's why I think mixing declarations with selectors is not too good idea.

> and
> allow us the more powerful construct of placing the nesting selector
> *anywhere* in the selector.
>
> For example, you could use this to apply some default styles for an
> element, and then tweak some of them when the element was nested
> inside of a particular element:
>
> #example .foo .bar {
> ššcolor: blue;
> šš@nest .baz & {
> šššštext-decoration: underline;
> šš}
> }
>
> ~TJ

Sounds interesting, though looks not quite readable and DRY. We are forced to always add redundant '&' (this could be very annoying in practice) even if all rules are without leading combinators and could be expressed without :this using my proposed syntax.

BTW, @with/:this could be used with the same result as @nest/& from your example:

    @with (#example .foo .bar) {
        :this {color: blue; }

        @with (.baz :this) {
            :this {text-decoration: underline; }
        }
    }

or with implicit :this:

    @with (#example .foo .bar) {
        {color: blue; }

        @with (.baz :this) {
            {text-decoration: underline; }
        }
    }

Received on Monday, 9 January 2012 22:37:24 UTC