CSS Nesting Done Right

CSS nesting has finally arrived in all major browsers, bringing with it both opportunities and potential pitfalls. While nesting can make our stylesheets more organized and maintainable, it can also lead to specificity issues if not used carefully. Let’s explore when and how to use this powerful feature effectively.

The Golden Rule of Nesting #

The fundamental principle is simple: Only nest when it adds value. More specifically, if a selector works without nesting, keep it flat. This approach helps maintain lower specificity and prevents unnecessary complexity in your stylesheets.

When to Use Nesting #

1. Pseudo-selectors #

Nesting pseudo-classes and pseudo-elements is one of the most valuable use cases:

.button {
  background: blue;
  color: white;

  &:hover {
    background: darkblue;
  }

  &::before {
    content: "→";
    margin-right: 0.5em;
  }
}

2. Media Queries #

Nesting media queries keeps related styles together, dramatically improving maintainability:

.header {
  padding: 1rem;
  font-size: 1.2rem;

  @media (min-width: 768px) {
    padding: 2rem;
    font-size: 1.5rem;
  }
}

3. Parent-dependent Modifiers #

When components need to change based on a parent state or theme:

.card {
  background: white;
  
  .theme-dark & {
    background: #222;
  }
}

4. State-dependent Styles #

For component states that can’t be avoided through BEM or other naming conventions:

.nav-item {
  color: #666;

  &[aria-current="page"] {
    color: #000;
    font-weight: bold;
  }
}

When to Avoid Nesting #

1. Component Elements #

Don’t nest BEM elements. This:

.card {
  &__title {
    font-size: 1.5rem;
  }
}

Should be:

.card__title {
  font-size: 1.5rem;
}

2. Generic Child Elements #

Avoid nesting generic elements. This:

.card {
  h2 {
    margin-bottom: 1rem;
  }
}

Should be:

.card__heading {
  margin-bottom: 1rem;
}

3. Multiple Levels Deep #

Avoid nesting more than one level deep. Deep nesting creates brittle, highly specific selectors that are hard to maintain.

Best Practices for CSS Architecture #

1. Use Modular Naming Conventions #

Adopt methodologies like BEM to create modular, flat hierarchies:

/* Better */
.button--large {
  font-size: 1.2rem;
}

/* Avoid */
.sidebar .button {
  font-size: 1.2rem;
}

2. Keep Specificity Low #

Lower specificity makes styles more predictable and easier to override when needed:

Prefer classes over IDs
Avoid unnecessary nesting
Use BEM modifiers instead of state classes when possible

Group related styles together using nesting only when it improves readability:

.dropdown {
  position: relative;

  /* States */
  &[aria-expanded="true"] {
    /* ... */
  }

  /* Pseudo-classes */
  &:hover {
    /* ... */
  }

  /* Media queries */
  @media (min-width: 768px) {
    /* ... */
  }
}

Conclusion #

CSS nesting is a great feature that should be used wisely. When applied correctly, it can make your stylesheets more maintainable and easier to understand. The key is to use nesting only when it serves a clear purpose: for pseudo-selectors, media queries, and parent-dependent styles. For everything else, prefer flat selectors and modular naming conventions.

Remember: The ability to nest doesn’t mean you should nest everything. Let readability and maintainability guide your decisions, and your future self (and team members) will thank you.