If you are coming from SASS world, you should be familiar with nesting. SASS allows you to nest style rules inside another rule so that you can group the related styles within one place. Now we can do it with CSS nesting.

The nesting in CSS is just around the corner and will be available quite soon. At the time of writing this article, it is supported by Chrome and TP for Safari, and I hope/believe it will land on Firefox and Edge soon too. Firefox and Edge now also support CSS Nesting, bringing this feature to all major browsers.

CSS nesting works quite similar to SASS but there are a couple of things different from SASS. It’s important to know these differences so that you can use CSS nesting effectively and make your code future-proof.

HTML code example

To demonstrate CSS nesting, we are going to use the simple HTML example below.

CSS nesting features (like SASS)

Let’s take a look at the examples of CSS nesting features working same as SASS.

Children

We can nest the style rules for .title inside .box.

.box {
  background-color: blue;

  .title {
    background-color: yellow;
  }
}

It is equivalent to:

.box {
  background-color: blue;
}

.box .title {
  background-color: yellow;
}

Parent

If we wanted to target the parent selector, .box, from the base selector, .title, we can do it with the &.

.title {
  background-color: blue;

  .box & {
    background-color: yellow;
  }
}

It is equivalent to:

.title {
  background-color: blue;
}

.box .title {
  background-color: yellow;
}

Also we can directly refer to the parent element just like SASS.

.box {
  background-color: blue;

  &:hover {
    background-color: green;
  }
}

It is equivalent to:

.box {
  background-color: blue;
}

.box:hover {
  background-color: green;
}

To specify the relationship with the parent selector:

.box {
  background-color: blue;

  + .content {
    background-color: pink;
  }
}

It is equivalent to:

.box {
  background-color: blue;
}

.box + .content {
  background-color: pink;
}

Nesting At-Rules

CSS nesting allows nesting at-rules such as @media, @container, @layer and @scope.

Let’s see an example with @media.

.box {
  background-color: blue;

  @media screen and (min-width: 600px) {
    background-color: red;
  }
}

With this CSS code above, before CSS nesting, it wasn’t allowed in CSS. Though, we could do it in SASS. Now CSS nesting allows us to nest the at-rules too. The above code is equivalent to:

.box {
  background-color: blue;
}

@media screen and (min-width: 600px) {
  .box {
    background-color: red;
  }
}

Unlike SASS

Unlike SASS, we cannot directly nesting elements with an identifier like type selectors because the nested selector should always start with a symbol. To work around this, we could either go with & or make a use of is().

box {
  background-color: blue;
  
  /* ❌ Invalid, because h2 is an identifier */
  h2 {
    background-color: yellow;
  }

  /* ✅ Valid, no longer starts with an identifier */
  & h2 {
    background-color: yellow;
  }

  /* ✅ Valid, same result as above */
  :is(h2) {
    background-color: yellow;
  }
}

Also CSS nesting doesn’t understand how to combine the selector name which is possible with SASS. Let’s see the SASS example first.

.box {
  background-color: blue;
  
  &--red {
    background-color: red;
  }
}

The compiled CSS will look like below:

.box {
  background-color: blue;
}

.box--red {
  background-color: red;
}

SASS creates the class name, .box--red, by using &. However, we cannot do it with CSS nesting.

Specificity

The specificity also works differently from SASS.

Let’s see an example.

#main, section {
  .title {
    background-color: red;
  }
}

.box {
  .title {
    background-color: yellow;
  }
}

In SASS, the title will get the yellow background as it will be complied as below because .box .title ([0, 2, 0]) has higher specificity than section .title ([0, 1, 1]).

#main .title,
section .title {
  background-color: red;
}

.box .title {
  background-color: yellow;
}

However, in CSS nesting, it works differently. The specificity of the CSS nesting follows the biggest specificity from the parent selector list. In #main, section selector group, even though we are targeting on section ([0, 0, 1]) element, because there is #main ([1, 0, 0]) in the group, it makes the selector group [1, 0, 0], and adding .title to it will make the specificity to [1, 1, 0] which is stronger than .box .title ([0, 2, 0]).

If … else …

While exploring Lea’s insights shared through a tweet, I found an interesting tweet about incorporating else-like clauses within CSS nesting.

Let’s take a look at our HTML example with the following CSS:

.title {
  color: blue;
  
  :not(&) {
    color: purple;
  }
}

We see that elements with the title class adopt a blue colour, whereas all other elements, which do not carry the title class, turn purple.

Here, the :not(&) functions equivalently to :not(.title), signalling that elements without the title class should be assigned the colour purple.

This technique provides a clever method for applying conditional styling.

Best practice

Nesting styles gives us many benefits but it’s important to use CSS nesting wisely. I always try to keep those 2 things in mind when I attempt to nest styles.

1. Don’t nest too deeply

Nesting CSS rules helps us write more organised and maintainable CSS code however, as we already experienced and learnt from SASS, nesting the rules too deeply makes the CSS code rather harder to read and maintain.

I usually recommend to nest one level deep, only nesting styles directly related to the parent selector. For the children styles, it’s best to start in the top level again and use techniques like BEM or cascade layers.

2. Feel free to use CSS nesting now

CSS nesting will be available across all the modern browsers soon, which means it’s a great opportunity to start write your CSS code following CSS nesting rules to future-proof your CSS code.

Most of the nesting rules are the same between CSS and SASS so you can keep nesting your styles as you’re used to doing with SASS, with all the benefits of organization and efficiency that come with it.

However, as discussed above, you may now want to use & to nest type selectors. And also don’t combine the selector name, instead start the selector as a separate block.

By following these guidelines, you can write CSS that’s not only beautiful, but also easy to work with and maintain over time.