# CSS Naming Convention

> **Scope:** universal
> **Layer:** 0 (always load)
> **Keywords:** css, bem, naming, class names, conventions
> **Load When:** always

**Verified against:** CSS (BEM + custom properties — language-level, no framework). Last-verified: 2026-05-20.

---

## Principles

1. **Page prefix** — Prevents conflicts
2. **BEM for components** — Clear hierarchy
3. **Namespaced variables** — No library collisions
4. **State suffixes** — Consistent modifiers

---

## Page Prefixes

| Page | Example |
|------|---------|
| Home | `.home-hero`, `.home-features` |
| Checkout | `.checkout-form`, `.checkout-summary` |
| Dashboard | `.dashboard-stats`, `.dashboard-chart` |
| Auth | `.auth-form`, `.auth-social-buttons` |

## BEM for Reusable Components

```css
.card { }              /* Block */
.card__header { }      /* Element */
.card__body { }
.card--featured { }    /* Modifier */
```

**Rule:** BEM for reusable components. Page prefix for page-specific elements.

## CSS Variables with Namespace

```css
:root {
  --app-primary: #007bff;
  --app-spacing-md: 1rem;
  --app-font-heading: 'Segoe UI', sans-serif;
}
```

## State Suffixes

| State | Suffix |
|-------|--------|
| Active | `--active` |
| Disabled | `--disabled` |
| Loading | `--loading` |
| Error | `--error` |

```css
.button { }
.button--active { }
.button--disabled { }
```

---

*MORPH-SPEC by Polymorphism Tech*