CSS Nesting Without Ampersand Is Coming

While ampersand is still required in some browsers, it’s very likely eventually we won’t need it.

There’s no more exciting feature lately in the CSS than nesting. A solution to nest selectors was known for a long time now especially due to SCSS and other CSS preprocessors that enabled that fantastic feature.

However, for all of these years browsers didn’t offer an equivalent. You had to write selectors one by one, making it hard to read and maintain complex CSS stylesheets.

The problem was known to W3C that worked for a while to introduce nesting in browsers by extending CSS parsers. The specification went forth and back.

I was watching it closely. First, ampersand character (&) was not required for nesting:

.card {
  h1 {
    ...
  }
   color: red;
}

However, after a while, the specification changed. Take a look at the example above. How the parser has to know if “h1" is a selector, or attribute like “color”?

It can’t distinguish it by the name, because the catalog of selector names and attributes is open. It can be anything.

The only way to differentiate is to see if the string token is followed by a colon (:). Attributes are…