One of the most sought-after features that developers have been demanding from native CSS for years is the ability to nest styles. With CSS Nesting, nesting style definitions becomes easier and more native, without having to rely on preprocessors like Sass or Less.

Historical Context

When writing classic CSS today, you do a lot of typing. Many developers therefore rely on preprocessors like Sass and Less to write nested CSS.

This leads to more dependencies and complexity in a project and does not change the fact that the generated CSS files are comparatively large.

This is where CSS Nesting comes in.

What is CSS Nesting?

CSS Nesting allows you to write style rules within others. This makes the code cleaner, more organized, shorter, and often more readable, especially when working with techniques like BEM, where classes are often derived from the parent element.

Comparison: Classic CSS vs. CSS Nesting

The main distinguishing feature is the structure:

Classic CSS:

.header {
    background-color: #f5f5f5;
}

.header .logo {
    width: 50px;
}

.header .nav {
    display: flex;
}

.header .nav .item {
    margin-right: 15px;
}

With CSS Nesting:

.header {
    background-color: #f5f5f5;

    & .logo {
        width: 50px;
    }

    & .nav {
        display: flex;

        & .item {
            margin-right: 15px;
        }
    }
}

Nesting creates a hierarchical structure in the code that better represents the relationships between the elements.

Syntax Details

In addition to basic nesting, you can also use the "&" character in other contexts:

.button {
    color: white;

    &:hover {
        color: grey;
    }

    &.active {
        background-color: blue;
    }
}

Combinations with other CSS features such as media queries and keyframes are also possible:

.container {
    width: 100%;

    @media (min-width: 600px) {
        &.double {
            width: 200%;
        }
    }
}

.button {
    animation: fadeIn 2s ease-in;

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

With this approach, the @keyframes are defined directly within the .button selector. This makes it easier to keep animations and the associated selector together. However, it is important to note that this @keyframes definition is specific to this selector. If you plan to use the same animation in multiple places, it makes more sense to define it at the top level of your stylesheet.

By embedding keyframe animations directly into the context of a specific selector, your CSS may become cleaner and more organized, especially in cases where the animation is only used in one place.

Advantages and Best Practices

  • Readability: The code becomes cleaner and more structured.
  • Less repetition: You don't have to repeatedly write the same selector.
  • Clarity of relationship: The nested structure clearly shows the relationships between the elements.
  • Depth of nesting: Avoid nesting too deeply to keep the code readable.
  • Specificity: Note that nesting can increase the specificity of selectors.

Disadvantages

Increased Specificity: Nesting can unintentionally increase the specificity of CSS selectors. This makes it harder to override styles later in the stylesheet or in other stylesheets. This can lead to "specificity wars" where you use even more specific selectors or !important declarations to override styles.

Complexity: Although nesting can make the code appear more organized, it can also lead to increased complexity, especially if nested too deeply. Code that is nested too deeply can be difficult to read and maintain.

Reusability: If styles are defined too specifically through nesting, they can be less reusable. This makes it difficult to reuse styles elsewhere in the project without duplicating them.

Performance: Although the difference is usually minimal, longer and more specific selectors can have a (albeit small) impact on rendering performance.

Browser and IDE Support for Nesting CSS

All major browsers (Chrome, Edge, Safari) already support Nesting CSS. Only Firefox is still a bit behind here.

Firefox 117 is expected to be released next week (August 24, 2023), from which point Firefox will also support Nesting CSS. Therefore, now is the perfect time to get to grips with the new possibilities in CSS.

Nesting CSS and Visual Studio Code

Unfortunately, Visual Studio Code does not yet support Nesting CSS. There is neither a working syntax highlighting nor an auto-completion. Until Nesting CSS support is built into Visual Studio Code, you can use this plugin to "retrofit" the function.

Nesting CSS and JetBrain's IDEs

Since version 2023.2, all JetBrain IDEs relevant for web development should fully support Nesting CSS.

Conclusion

CSS Nesting offers a powerful way to write cleaner and more organized CSS. It combines the advantages of structured coding with the simplicity and performance of native CSS. It is important to familiarize yourself with the best practices and to use nesting consciously and effectively.