Selector Nesting and Its Output

Nesting allows related selectors to be grouped under a parent selector. This can make component styles easier to scan when nesting reflects a genuine relationship.

For example, nesting .card__title inside .card generates .card .card__title, which is a descendant selector. Nesting does not automatically create a BEM element selector unless you explicitly construct that selector.

Deep nesting is often harmful because each additional level can increase selector specificity, couple styles to markup structure, and make later overrides harder to understand.

Prefer a few meaningful levels rather than mirroring every HTML element inside a component.

Nesting guidelines

Good: One or two meaningful levels

Keeps relationships visible without excessive specificity.

Risky: Long chains of element selectors

Couples styles to the exact markup hierarchy.

Alternative: Flat component classes

Often provides more predictable reuse and overriding.

Nested Selectors

.card {
  padding: 1rem;

  .title {
    font-size: 1.25rem;
  }

  .description {
    color: #555;
  }
}

💡 Sass compiles this example into .card, .card .title, and .card .description rules. The nested selectors target descendants of .card. They do not target elements that simply have the same class elsewhere in the document.

Knowledge Check

What selector is generated by `.card { .title { color: red; } }`?

Selector Nesting and Its Output

STAY UPDATED WITH BYTES!