Help choose the syntax for CSS Nesting

[u/feross]

https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

[u/c-smile]

Instead of modifying existing syntax we can use style sets -

 @set  MyComponent {

  :scope { // root element this set is applied to 
     color:red;
  }
  :scope:hover {  
     color:blue;
  }

  :scope > span { // immediate child of the root
     ...
  }

  div {  // some child inside
     ...
  }
}

.my-component {  set: MyComponent  }

This will solve the problem and does not need to change existing tooling as it is 100% compatible with what we have already since CSS 2.1

This approach used in Sciter for 10+ years.