CSS Nesting

We developed a few core guidelines for deciding when to use CSS Nesting.

First, consider whether using CSS Nesting improves readability. Code that is easier to read will be easier to understand and maintain in the long run.

Next, assess if the nested structure will be maintainable. Maintaining clean and manageable code is crucial for long-term project success.

Also, evaluate whether it might be more appropriate to split components into smaller chunks rather than relying on nesting. Smaller, well-defined components can often simplify the overall structure and make the codebase easier to work with.

Additionally, think about the implications for code review and Git diffs. Code that is clear and straightforward will make the review process more efficient and minimize confusion during version control.

Finally, try to keep nesting to one level. Excessive nesting can lead to complexity and reduced clarity, so it’s generally best to keep it minimal. These are a few cases where we think CSS Nesting is useful, i.e. for pseudo-classes, state modifiers, and rich text:

/* pseudo-classes */
.Component {
  &:hover {
  }
  &:focus {
  }
}

/* state modifiers */
.Component {
  &.is-active {
  }
}

/* rich text */
.RichText {
  h2 {
  }
  p {
  }
  blockquote {
  }
}