limit-css-nesting-depth

Summary

Limit CSS nesting (SCSS/Native Nesting) to a maximum of 3 levels deep. If you need to go deeper, your HTML structure or class naming strategy is likely too complex.

Rationale

• File Size: Deep nesting generates long selectors (.a .b .c .d .e) which bloat the CSS file.
• Performance: Browsers have to traverse the DOM tree right-to-left to match deep selectors, which can be slower (though less of an issue today).
• Fragility: Deep selectors mirror the HTML structure precisely. Changing the HTML structure breaks the CSS.

Guidance

1. Flatten: Instead of .card .header .title, just use .card-title.
2. BEM: Use Block Element Modifier (BEM) naming to avoid nesting entirely (e.g. .card__title).

Examples