Naming Conventions

Prefer simple selectors

STACSS favors simple selectors and modern HTML structures. Avoid overly verbose naming systems whenever possible.

Modern HTML semantics — semantic elements, state attributes, and natural nesting — often eliminate the need for elaborate naming conventions.

<nav class="nav">
  <a class="nav__item--is-active">

.nav__item--is-active

<nav class="nav">
  <a class="active">

.nav a.active

Keep selector depth shallow. A selector like .nav a.active communicates both structure and state without requiring a naming system. Reserve longer class names for cases where context genuinely cannot be inferred from the DOM.

Component variants

For component variants, prefer a single flat class name over BEM modifiers. Use @extend in Sass so the variant inherits base styles automatically — no need to put two classes on the HTML element.

<a class="btn btn--primary">

.btn
  // base styles

.btn--primary
  // variant styles

<a class="btn-primary">

.btn
  // base styles

.btn-primary
  @extend .btn
  // variant styles

@extend .btn ensures the variant inherits every base rule — no duplication, no extra class in HTML.