CSSnavn

CSSnavn is a naming convention for CSS class names and design tokens designed to improve readability, consistency, and maintainability of front-end styles. It prescribes a systematic approach to how components, their parts, and their states are named, with a focus on semantic meaning rather than presentational hints. The term merges CSS with 'navn', the Danish and Norwegian word for 'name', signaling an emphasis on explicit naming across a project or design system.

Core principles include semantic clarity, namespace scoping to minimize collisions, and predictable refactoring as a project grows. CSSnavn encourages stable lower-case, hyphen-delimited tokens, and a balance between component-level names and state or variant indicators. It is intentionally technology-agnostic, compatible with standard CSS as well as preprocessors and CSS-in-JS approaches.

Structure guidelines commonly used in CSSnavn resemble established patterns while remaining explicit. A component namespace forms the base name, for example 'site-card' or 'nav-menu'. Elements are indicated with a separate marker, such as 'site-card__title' or 'nav-menu__item'. Modifiers signal variations and states using a double-hyphen, e.g., 'site-card--compact' or 'nav-menu__item--active'. Tokens for design tokens use a dedicated namespace, like 'color--brand' or 'space--md'.

Adoption and tooling often include linters and style guides to enforce naming rules, along with integration into design systems where components are reused across pages and apps. CSSnavn is designed to be language-agnostic and interoperable with modern CSS constructs, allowing teams to collaborate with consistent naming no matter the framework.