Skip

Nesting CSS

Presenter: Adam Argyle
Duration: 3 min

Learn how the new CSS module Nesting 1 works and the syntax it accepts. Learn how it can help centralize context style shifts. Learn how it can help developers from repeating themselves and ship smaller stylesheets.

See also the Codepen that Adam uses to illustrate CSS Nesting.

All demos

Skip

Video

Welcome to CSS Nesting 1.

Let's go over what this new CSS feature does and why it is so rad!

Okay, so its sort of main premise here is it's a shortcut for creating CSS rules.

It is syntactic sugar.

It's helping you write the same styles you were, but with less.

Get more with less.

What else do you want out of sugar?

I mean, that's pretty good for me, and how does it do that?

It does that by putting selectors inside of other selectors.

It allows that and allows mixing and matching with ease.

So here, if I had turned on my controls here and I pause, when this is in the not nesting state, aha, right there, we can see that here's an example that's not using nesting, and this is creating a counter.

Creating a counter has three parts, and before nesting, we had to scatter the three parts across three separate selectors that all kinda had some repetition.

We had article, article, and article, right.

All of these counter properties belong to the scope of article, but we had to sort of repeat our scope in order to get there.

Well, that's what's nice about nesting, so if we watch this play out, we'll see it sort of morph into the nesting state.

So we saw that the articles were all able to line up here.

We only have to write that once, and we can use this & macro here, which represents the previous one, so it says, I'm beginning a new selector, and I want to bring the previous selector as the start of my new selector, so we can & :checked", so we're finding checked children of article. We're looking for .completed class children that are inside of article, and we're giving them a before element that represents the current count of chapters. So that's kind of a cool example, at least I think, because we're colocating all of our styles. It gets to read similar to the way that we think about it, and we get to sort of put all of this logic into one block, which is sort of the way that I think we want to think about it again as a sort of single unit of functionality. It's a single algorithm that we're defining, and I think that ends up being really nice that way. So if we scroll down here, I have a couple of demos that are trying to show the relationship of a DL, a DD, and a DT, and we're gonna write a few styles for it really quick, so if I go to definition list, and I start going in here, and I look at & > dt", I can find and give them a color of var --grape-5", and now, they all have a color of grape-5, and I can look at the DDs and find them and give them a margin-inline-start of 20 pixels. Right, there they go. Okay, now, the one on the bottom here has a class on it called light", and it's going to allow me to tie into that variant right here, so I can say &.light-theme, and so why that's interesting is there's no space.

I'm targeting a class in addition with the DL, and I can give this one, well, here, let's take these styles here.

(keyboard clicking) I guess I didn't need the DT.

I was going more for a DD.

Here we go.

I'll just cut that out.

DD, and we'll say color's gonna be gray-8, (keyboard clicking) and oh, we need another background color.

background-color: var --gray-2". Right, so now, we have a light theme. We have a dark theme when we're able to articulate the variants right here inline in this block, and look at how we can sort of colocate all these styles, being nice and succinct, carrying over our nice, nested relationship of our semantic HTML into our nesting. So I hope that was a good introduction. Go check out the spec. There's a lot of examples in there, and I'll see you in your style sheets. Take it easy, y'all. Bye.

Skip

All Demos

Skip

Sponsors

Title sponsor

Coil Technologies,

Media sponsor

Legible

Silver exhibitor

Movement for an open web

Bronze exhibitor

Igalia

For further details, contact sponsorship@w3.org