CSS Nesting, specificity, and you

Here’s Kilian Valkhof on CSS nesting which isn’t available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, for example, the following code:

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

When CSS nesting lands, that last line border: 1px solid; won’t be applied to the div like it would be in, say, Sass. That’s because with CSS nesting, any styles you want applied to that div have to be written before any nesting styles are written. I think this makes a ton of sense because I tend to enforce that style in any Sass codebases I work on (it’s just much easier to read), but I can imagine people getting confused about this the first time around.

One of the smaller and, yet for some reason, super exciting things about CSS nesting is how we’ll be able to nest media queries, as Kilian notes, just like this:

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

This is very exciting!

Direct Link to Article — Permalink

---

The post CSS Nesting, specificity, and you appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

source https://kilianvalkhof.com/2021/css-html/css-nesting-specificity-and-you/