CSS Nesting, specificity, and you

CSS Nesting, specificity, and you

Kilian Valkhof has taken a look at CSS nesting, which isn't in browsers yet but is coming soon. While it will look familiar to anyone who has used Sass or Less, there are a few key differences worth knowing about before you start writing code.

div {
  background: #fff;
  & p {
    color: red;
  }
  border: 1px solid;
}

Once CSS nesting lands, that last line border: 1px solid; will not apply to the div, even though it would in a preprocessor like Sass. The reason: any styles you want applied directly to that div have to come before any nested rules. That ordering rule makes sense to Valkhof—he says it's the style he already enforces in Sass codebases for readability—but he acknowledges it could trip people up the first time they hit it.

body {
  background: red;
  
  @media (min-width: 40rem) {
    & {
      background: blue;
    }
  }
}

One of the smaller but still surprisingly exciting details Valkhof highlights is that CSS nesting will let you nest media queries directly inside a rule, just like the snippet above shows.