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

Selector nesting with @-rules

From: Pete Boere <pete@the-echoplex.net>
Date: Sat, 21 Apr 2012 14:17:24 +0100
Message-ID: <CAKZZz6ccV7sr0L5PG255_z_VGfoG5JFYR-FLVpnDkaM_j5m7kA@mail.gmail.com>
To: www-style@w3.org
Looking at the editor draft for CSS3 hierarchies (
http://dev.w3.org/csswg/css3-hierarchies/) one thing that bothers me is the
excess of ampersands. Would using @-rule syntax avoid this necessity?

@prefix table.fixtures {

    td, th {
        color: #333;
        background: #f5f5f5;
        }
    th {
        border: 1px solid;
        }

    @prefix tbody, thead {
        ...
    }
}


The ampersand could be re-purposed solely as an optional positional symbol
as some preprocessors use it:

@prefix .module {

    &.alt {
        color: purple;
        }
    .hasJs & {
        color: red;
        }
}

.module.alt { color: purple; }
.hasJs .module { color: red; }


Another thing that concerns me about nesting in general is the lock-in that
means no rules can be repurposed outside of a nested block; Introducing
another symbol to compliment the ampersand could enable an opt out:

@prefix .module {

    ^.button,
    .button {
        ...
    }
}

.button,
.module .button {
    ...
}


-- 
Pete Boere
Web Developer
Received on Saturday, 21 April 2012 13:17:52 GMT

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