W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Re: @with -- DRY syntax for nesting selectors

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Wed, 11 Jan 2012 16:23:35 +0400
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Tab Atkins Jr. <jackalmage@gmail.com>,www-style@w3.org
Message-Id: <467601326284615@web32.yandex.ru>
10.01.2012, 20:04, "Brad Kemper" <brad.kemper@gmail.com>:
> On Jan 9, 2012, at 2:24 PM, Marat Tanalin | tanalin.com wrote:
>
>>> š#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; }
>> šššššššš}
>> šššš}
>
> I'd be nice if people writing these sort of selectors could also write what they expand out to, as the whole :this/& concept is not quite natural enough to immediately grok before getting familiar with it.
>
> As I understand it, your example (which looks much nicer and easier to read in its "implicit" form than either of the other two, though it is an awful lot of curly braces to get lost in), would expand to this:
>
> #example .foo .bar { color: blue; }
> .baz #example .foo .bar š{ text-decoration: underline; }
>
> Right so far? Then what about this:
>
> ššš@with (#example .foo .bar) {
> ššššššš{color: blue; }
>
> ššššššš@with (.baz :this) {
> ššššššššššš{text-decoration: underline; }
>
> ššššššššššš@with (.qux :this .wibble) {
> šššššššššššššššš{position:absolute;}
> ššššššššššš}
> ššššššš}
> ššš}
>
> Is it this:
>
> #example .foo .bar { color: blue; }
> .baz #example .foo .bar š{ text-decoration: underline; }
> .qux .baz #example .foo .bar .wibble š{ position:absolute; }

Yes. ':this' can be considered as placeholder for selector passed to containing @with. So if we have:

    @with (.lorem) {
        .foo {}

        @with (.ipsum :this .dolor) {
            .amet {...}
        }
    }

it would be equivalent to:

    .lorem .foo {...}
    .ipsum .lorem .dolor .amet {...}

Perhaps meaning of '&' in current 'CSS Hierarchies Module Level 3' draft (http://dev.w3.org/csswg/css3-hierarchies/ ) is similar, but '&' seems to be annoying/littering compared to my proposed @with syntax which is probably more elegant and DRY.

> I think it would be less confusing if there was less of an abundance of curly braces to keep straight (especially if you write the whole thing in one line). How about this:
>
> ššš@with (#example .foo .bar) [
> ššššššš{color: blue; }
>
> ššššššš@with (.baz :this) [
> ššššššššššš{text-decoration: underline; }
>
> ššššššššššš@with (.qux :this .wibble) [
> šššššššššššššššš{position:absolute;}
> ššššššššššš]
> ššššššš]
> ššš]
>
> Then each set of declarations is in its familiar curly braces, but the embedding level is determined by square braces.

I think adding another brace type is unreasonable here.

> Except now I forget whats wrong with just doing this:
>
> ššš@with (#example .foo .bar) {
> šššššššcolor: blue;
>
> ššššššš@with (.baz :this) {
> ššššššššššštext-decoration: underline;
>
> ššššššššššš@with (.qux :this .wibble) {
> ššššššššššššššššposition:absolute;
> ššššššššššš}
> ššššššš}
> ššš}

My original intention was to conform to current CSS fundamental syntax as much as possible. Other than that, it's fairly acceptable for me to mix property declarations (like 'color: blue;') with at-rules (@with) to simplify usage of @with as in your last code example.

What I'm really strongly opposed to is mixing property declarations (like 'color: blue;') with _selectors_ (selector rules) themselves. That's what I especially don't like in nonstandard solutions like SASS/LESS. See one of my previous messages for reasoning:

http://lists.w3.org/Archives/Public/www-style/2012Jan/0377.html
Received on Wednesday, 11 January 2012 13:56:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT