MCSS-lite (wip)
## key insight
Existing frameworks produced too many AI errors — Bootstrap gave 65% LLM accuracy in my prototyping workflows. A smaller, more predictable vocabulary gets to 95%. Less surface area, better outcomes.
## the challenge
Claude Code, Cursor, and GPT-4 kept inventing class names with Bootstrap or Tailwind. The vocabulary was too large and too inconsistent. I wanted a system small enough that the model hits the right class on the first try — and opinionated enough that there's only one right class.
## architecture & process
┌─Design tokens· color, type, space, shadow, motion — :root overrides to theme
├─l-* layout layer· l-container, l-stack, l-grid, l-cluster, l-sidebar…
├─c-* component layer· c-button, c-card, c-modal, c-input, c-badge, c-nav…
├─u-* utility layer· single-purpose overrides, u-muted / u-mono / u-pretty…
└─@layer cascade· global → layout → component → utility (no specificity wars)
## key decisions
- The Golden Rule: components (c-*) never declare margin on their root element. Layout parents (l-*) own all spacing. This single constraint makes everything composable.
- Naming follows c-block__element--modifier. States via data-state attributes. Predictable for humans and for LLMs — the right class is also the obvious class.
- Smaller vocabulary → higher LLM accuracy. 95% first-try valid vs 65% with Bootstrap in my own prototyping workflows.
- Tokens as the single source of truth — override :root to theme, no preprocessor required.
## results
95%
LLM first-try accuracy
65%
Bootstrap baseline (for comparison)
3
cascade layers, no specificity wars
MIT
open source, zero runtime deps
## tools used
CSS@layerClaude CodeGeminiGitHub