SCSS Class Names

General rules

• Case and separators: always lowercase, words separated by single dashes.
  ✅ .card-header
❌ .cardHeader, .card_header

• Avoid BEM‑style notation: we do not use double underscores (__) for elements or double dashes (--) for strict block modifiers. OOCSS relies on independent classes that you mix in HTML.

Structural objects (the “objects”)

• Object classes represent reusable layout patterns. They define only structural properties: display, dimensions, grid behaviour, spacing, positioning.
  Examples: .media, .btn, .grid, .list-bare, .card.

• Sub‑parts of an object are named as simple hyphenated classes that belong to the object conceptually but remain independent in CSS (no descendant‑specific restrictions).
  Examples: .media-img, .media-body; .card-header, .card-body, .card-footer.
  These can be placed anywhere and will still work – the object does not lock them inside itself via nested selectors.

Skin classes (the “skin”)

• Skin classes handle purely visual appearance: colour, typography, shadows, decorations. They never impose layout or size.

• They are short, single‑word adjectives (or a short namespace if a conflict is possible). Combine them with any structural object that respects them.
  Examples: .primary, .secondary, .muted, .danger, .success, .highlight.

• States follow the same principle: .active, .disabled, .expanded.
  In HTML:

  <button class="btn primary large">Submit</button> <section class="card highlight"> <div class="card-header">Title</div> </section>

• Skin classes never include element or block names – they are purposely generic so they can be reused across completely different objects.

Modifiers for size or layout variants

When an object requires alternative dimensions or structural tweaks that are not purely visual, provide short variant classes directly.
Examples: .btn-small, .btn-large, .grid-2col, .grid-3col.
These still keep the object name as a prefix, but the modifier is a simple hyphenated extension – never a chain like btn--large.

Context independence and specificity

• Every class must be usable outside its original parent. Avoid styling via descendant selectors.

• Prefer single classes over compound selectors wherever possible.

• Keep specificity flat: one class per rule, or at most two when applying a skin.