Selector nesting with @-rules

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 UTC