CSS nesting

The number one feature that made people adopt CSS preprocessors is finally coming to native CSS: nesting.

.container {
  block-size: 100px;
  background: green;

  .child {
    block-size: 20px;
    background: blue;
  }
}

This is equivalent to:

.container {
  block-size: 100px;
  background: green;
}

.container .child {
  block-size: 20px;
  background: blue;
}

And no transpilation is needed!

Check out the links below to learn more about this feature and its gotchas.