Help pick a syntax for CSS nesting
How about:<p><pre><code>  x = .nesting {
    color: hotpink;
  }

  y = x &gt; .is {
    color: rebeccapurple;
  }

  y &gt; .awesome {
    color: deeppink;
  }
</code></pre>
plus:<p><pre><code>  x = .nesting;
  y = x &gt; .is;
  z = y &gt; .awesome;

  x {
    color: hotpink;
  }

  y {
    color: rebeccapurple;
  }

  z {
    color: deeppink;
  }

</code></pre>
The names x, y and z aren&#x27;t ambiguous because they are lexically defined. They could be allowed to shadow tags:<p><pre><code>  pre = .foo &gt; .bar;
</code></pre>
then from that point on, pre isn&#x27;t the HTML tag, but the above definition. Or else tags could be reserved: cannot use those as names. (Causing trouble when new tags get introduced; bad idea.)<p>Regarding the @nest syntax, why couldn&#x27;t it look like an attribute?<p><pre><code>  ...sel... {
     color: blue;
     nest: &gt; .whatever { ... }
  }
</code></pre>
Or just the colon:<p><pre><code>  ...sel... {
     color: blue;
     : &gt; .whatever { ... }
  }
</code></pre>
Why use containment to express the nesting? What is being nested is the selectors. The braces group something else: the attributes affected by selectors. Why would nested selectors have to go into those braces?<p>The + character at the start of a rule could mean &quot;the selector of the previous rule&quot;:<p><pre><code>  .nesting { color: hotpink }
  + &gt; .is { color: rebeccapurple }
  + &gt; .awesome { color: deeppink }
</code></pre>
Or use a master outer brace for this:<p><pre><code>  {
      .nesting { color: hotpink }
      &gt; .is { color: rebeccapurple }
      &gt; .awesome { color: deeppink }
  }
</code></pre>
The understanding is that the rules grouped in the brace have a cumulative selector, rather than independent selectors.<p>Or what if braces just group, and @nest (or whatever) is required to indicate the selector stacking semantics:<p><pre><code>  @stack {
     .nesting { color: hotpink; }
     &gt; .is { color: rebeccapurple; }
     &gt; .awesome { color: deeppink; }
  }
</code></pre>
Now you can have N levels of selector refinement without N levels of syntactic containment. The containment is still available:<p><pre><code>  @stack {
     .nesting { color: hotpink; }
     &gt; .is { color: rebeccapurple; }
     {  
       &#x2F;* parallel rules: not a stack *&#x2F;
       .awesome { color: deeppink; }
       .terrific { color: yellow; }
     }
     @stack {
       &#x2F;* stack-in-stack, cross-producting. *&#x2F;
       .even { color: red; }
       .more { color: green; }
       .nested { color: blue; }
     }
  }
</code></pre>
Here, because the nested @stack follows a block of parallel rules, a Cartesian product semantics can come into effect. That is to say, it is equivalent to:<p><pre><code>  @stack {
     .nesting { color: hotpink; }
     &gt; .is { color: rebeccapurple; }
     {  
       @stack {
         .awesome { color: deeppink; }
         .even { color: red; }
         .more { color: green; }
         .nested { color: blue; }
       }
       @stack {
         .terrific { color: yellow; }
         .even { color: red; }
         .more { color: green; }
         .nested { color: blue; }
       }
     }
   }
 </code></pre>
The @stack following a parallel rule causes the @stack to distribute into the parallel branches.<p>Kind of like Bash brace expansion:<p><pre><code>  $ echo nesting-is-{awesome,terrific}-even-more-nested
  nesting-is-awesome-even-more-nested nesting-is-terrific-even-more-nested</code></pre>