CSS nesting is great, but should be used with caution. As a rule, if a selector will work without being nested, don't nest it. However, there are certain situations where nesting can make things easier to understand.

Anja Petry

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn when to nest CSS selectors and when to avoid it. Nesting pseudo-selectors, parent modifiers, media queries, and selectors that don't work without nesting is recommended. CSS naming conventions such as BEM and SUIT recommend decreasing the specificity of selectors whenever possible.

When to Nest CSS