Naming Conventions

CSS class naming patterns used across all components.

Naming Conventions

CSS class naming rules for all pudge-ui components, ensuring consistent and predictable class names across the system.

BEM-lite Pattern

component-element (no __ or --, use - throughout):

  • .push-btn (component)
  • .readout-value (element within readout)
  • .dial-center-bar (element within dial)

State Classes

Added to the component root:

  • .active — selected / on state
  • .on — power-on / enabled (for toggles)
  • .pressed — currently being pressed
  • .disabled or [disabled] — unavailable
  • .error — error state
  • .recording — REC active

Material Variant Classes

  • .variant-metal — brushed aluminum
  • .variant-silver — silver anodized
  • .variant-chrome — polished chrome
  • .variant-glossy — polycarbonate gel

Size Classes

.xs, .sm, (default = md), .lg, .xl

BEM-lite naming. No __ or --. Simple class names that read like hardware labels.

Pudge