Skip to content

ADR 0001 Pure CSS with BEM and CSS variables

Jump to bottom
Dmitrii Suroviagin edited this page Apr 30, 2026 · 1 revision

Status

Accepted

Context

The library ships reusable React components for multiple consumers. Styling must stay framework-agnostic, themable, and easy to override without coupling to a CSS-in-JS runtime.

Decision

Use plain CSS files colocated with components, BEM-style class names with the cl- prefix, and design tokens as CSS variables (see src/styles/main.css). Light/dark themes switch via a root class (e.g. .cl-components-dark-theme).

Consequences

  • No runtime style injection; smaller bundle and simpler SSR story.
  • Consumers can override tokens or classes without ejecting from a style engine.
  • Class name discipline is enforced by convention and linting, not by a single styled API.

Clone this wiki locally