Selectors & Nesting

Introduction

This standard defines rules for writing CSS/SCSS selectors and controlling nesting depth to maintain readable, performant, and maintainable stylesheets.

Nesting Depth

Selectors MUST NOT be nested deeper than 3 levels (excluding media queries and pseudo-elements).

Media queries and pseudo-elements (::before, ::after, :hover) do not count towards this limit.

// CORRECT (3 levels)
.main-header {
  &__content {
    &--highlighted {
      color: ;
    }
  }
}

// WRONG (4+ levels)
.main-header {
  &__content {
    .inner {
      span {
        color: red;
      }
    }
  }
}

Qualified Selectors

• BEM classes MUST NOT be qualified with a type selector: div.main-header is forbidden, use .main-header instead.

• ID selectors MUST NOT be used for styling. IDs MAY only be used as JavaScript hooks.

Universal Selector

The universal selector * SHOULD NOT be used outside of global resets.

Selector Specificity

Selectors SHOULD be as short and specific as possible — prefer .main-header__title over .main-header .content .title.

BEM Element Nesting

BEM elements MUST NOT be nested beyond one level. Chained elements like __element__subelement are forbidden. Instead, create a flat element: block__subelement.

// CORRECT
.card__header { ... }
.card__header-title { ... }

// WRONG
.card__header__title { ... }