Modern CSS

CSS nesting

Nesting improves readability when used carefully. Excessive nesting recreates historical CSS problems.

Good nesting

CSS code example

.product-card {
    > .title {
        margin: 0;
    }
}

CSS code example

.page {
    .wrapper {
        .container {
            .card {
                .title {}
            }
        }
    }
}