Naming Conventions

How STACSS approaches CSS selectors and class names.

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.

BEM — verbose

HTML

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

CSS

.nav__item--is-active

Preferred

HTML

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

CSS

.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.