Right here’s Kilian Valkhof on CSS nesting which isn’t out there in browsers but, however shall be quickly. There are a number of variations he notes between CSS nesting and nesting in Sass or Much less although. Take, for instance, the next code:
div {
background: #fff;
& p {
shade: purple;
}
border: 1px stable;
}
When CSS nesting lands, that final line border: 1px stable; received’t be utilized to the div like it might be in, say, Sass. That’s as a result of with CSS nesting, any types you need utilized to that div need to be written earlier than any nesting types are written. I believe this makes a ton of sense as a result of I are likely to implement that model in any Sass codebases I work on (it’s simply a lot simpler to learn), however I can think about individuals getting confused about this the primary time round.
One of many smaller and, but for some cause, tremendous thrilling issues about CSS nesting is how we’ll have the ability to nest media queries, as Kilian notes, similar to this:
physique {
background: purple;
@media (min-width: 40rem) {
& {
background: blue;
}
}
}
That is very thrilling!
Direct Hyperlink to Article — Permalink
The publish CSS Nesting, specificity, and also you appeared first on CSS-Methods. You may help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!