css - CSS Nesting

CSS Nesting is a modern CSS feature that allows developers to write styles inside other style rules in a structured and readable way. It works similarly to nesting in preprocessors like Sass and LESS, but it is now becoming part of native CSS. Nesting helps organize styles logically by grouping related selectors together, making stylesheets easier to maintain and understand.

What is CSS Nesting?

Traditionally, CSS requires developers to write full selectors repeatedly. For example:

.navbar {
    background-color: black;
}

.navbar ul {
    list-style: none;
}

.navbar ul li {
    display: inline-block;
}

.navbar ul li a {
    color: white;
}

In this example, the .navbar selector is repeated multiple times. In large projects, this repetition can make CSS files lengthy and harder to manage.

With CSS Nesting, these related rules can be grouped together:

.navbar {
    background-color: black;

    ul {
        list-style: none;

        li {
            display: inline-block;

            a {
                color: white;
            }
        }
    }
}

This structure clearly shows the relationship between elements and reduces repeated code.

Why CSS Nesting is Important

CSS Nesting improves stylesheet organization and readability. It becomes especially useful in large projects where components contain multiple child elements.

Advantages include:

  • Reduces repetitive selectors

  • Makes code cleaner and shorter

  • Improves readability

  • Helps maintain component-based styling

  • Easier to debug and modify

  • Matches HTML structure visually

For developers working on modern frontend applications, nesting simplifies complex style hierarchies.

Basic Syntax of CSS Nesting

The general syntax is:

selector {
    property: value;

    nested-selector {
        property: value;
    }
}

Example:

.card {
    padding: 20px;
    border: 1px solid gray;

    h2 {
        color: darkblue;
    }

    p {
        font-size: 16px;
    }
}

This applies styles to h2 and p elements inside .card.

Equivalent traditional CSS:

.card {
    padding: 20px;
    border: 1px solid gray;
}

.card h2 {
    color: darkblue;
}

.card p {
    font-size: 16px;
}

Using the & Symbol in CSS Nesting

The & symbol refers to the parent selector. It is useful when creating pseudo-classes, pseudo-elements, or modifier classes.

Example with hover:

.button {
    background-color: blue;
    color: white;

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

Equivalent CSS:

.button {
    background-color: blue;
    color: white;
}

.button:hover {
    background-color: darkblue;
}

Nesting with Modifier Classes

The & symbol can also create variations of a class.

Example:

.alert {
    padding: 15px;

    &.success {
        background-color: green;
    }

    &.error {
        background-color: red;
    }
}

Equivalent CSS:

.alert {
    padding: 15px;
}

.alert.success {
    background-color: green;
}

.alert.error {
    background-color: red;
}

This technique is common in component-based design systems.

Nesting Media Queries

CSS Nesting allows media queries to be written inside components.

Example:

.container {
    width: 1200px;

    @media (max-width: 768px) {
        width: 100%;
    }
}

Equivalent CSS:

.container {
    width: 1200px;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

This keeps responsive styles close to the component they affect.

Nested Pseudo-Elements

Pseudo-elements can also be nested.

Example:

.title {
    color: black;

    &::before {
        content: "★ ";
        color: gold;
    }
}

Equivalent CSS:

.title {
    color: black;
}

.title::before {
    content: "★ ";
    color: gold;
}

Combining Multiple Nested Selectors

Example:

.menu {
    background-color: lightgray;

    li {
        list-style: none;

        a {
            text-decoration: none;

            &:hover {
                color: red;
            }
        }
    }
}

This creates a structured hierarchy that resembles HTML layout.

CSS Nesting vs Sass Nesting

Before native CSS Nesting, developers used preprocessors like Sass.

Sass Example:

.sidebar {
    width: 250px;

    ul {
        padding: 0;
    }
}

Modern CSS Nesting now supports similar functionality directly in browsers without requiring preprocessing tools.

Difference:

Feature Sass Nesting Native CSS Nesting
Requires compiler Yes No
Browser support Compiled CSS Direct browser support
Syntax flexibility More advanced More strict
Performance Extra build step Native execution

Browser Support for CSS Nesting

Modern browsers are gradually supporting native CSS Nesting.

Supported in:

  • Google Chrome

  • Microsoft Edge

  • Safari

  • Firefox (latest versions)

However, developers should still test compatibility carefully for older browsers.

Best Practices for CSS Nesting

1. Avoid Excessive Nesting

Too much nesting creates overly complex selectors.

Bad example:

.main {
    .section {
        .box {
            .content {
                .text {
                    color: red;
                }
            }
        }
    }
}

Deep nesting reduces readability and increases specificity problems.

2. Keep Nesting Limited

A nesting depth of 2–3 levels is usually sufficient.

Good example:

.card {
    h2 {
        color: navy;
    }

    p {
        color: gray;
    }
}

3. Use & Carefully

The & operator is powerful but can become confusing if overused.

Maintain clear and understandable selector structures.

4. Organize Component Styles

CSS Nesting works best in component-based development.

Example:

.profile-card {
    padding: 20px;

    img {
        border-radius: 50%;
    }

    h3 {
        font-size: 24px;
    }
}

This groups all related styles together.

Common Mistakes in CSS Nesting

Missing & with Pseudo-Classes

Incorrect:

.button {
    :hover {
        color: red;
    }
}

Correct:

.button {
    &:hover {
        color: red;
    }
}

Over-Nesting

Excessive nesting increases CSS specificity and makes maintenance difficult.

Confusing Selector Hierarchies

Avoid creating complicated nested relationships that are hard to trace.

Real-World Example of CSS Nesting

Example of a product card component:

.product-card {
    border: 1px solid #ccc;
    padding: 20px;

    img {
        width: 100%;
    }

    h2 {
        font-size: 24px;
    }

    .price {
        color: green;
        font-weight: bold;
    }

    button {
        background-color: blue;
        color: white;

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

This structure keeps all product-related styles in one place.

Benefits in Large Projects

In enterprise applications or frontend frameworks like React, Angular, and Vue, CSS Nesting helps maintain component-specific styles cleanly.

Benefits include:

  • Better scalability

  • Easier maintenance

  • Improved collaboration

  • Cleaner file organization

  • Faster debugging

Conclusion

CSS Nesting is a powerful modern feature that improves the structure and readability of stylesheets. It allows developers to group related styles together, reduce repetition, and create cleaner CSS architectures. By using nesting carefully and avoiding excessive depth, developers can build maintainable and scalable styles for modern web applications.

As browser support continues to improve, CSS Nesting is becoming an important feature for modern frontend development and is expected to replace many traditional preprocessing needs in the future.