Re: Selector nesting with @-rules

Similar proposal by me from 2012-01-09:
http://lists.w3.org/Archives/Public/www-style/2012Jan/0371.html


21.04.2012, 17:17, "Pete Boere" <pete@the-echoplex.net>:
> 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:47:10 UTC