가이드
작은 웹사이트를 위한 CSS 변수 정리 방법
과하지 않게, 작은 사이트에 맞는 CSS 변수 구조를 만드는 실용 가이드입니다.
작은 사이트도 기본 변수 구조가 있으면 스타일 흔들림과 재작업을 줄일 수 있습니다.
Create one root file for tokens
Store core variables in one place, usually in a global stylesheet.
This becomes the source of truth for repeated design values.
Group tokens by UI role
Use small groups like text, background, border, and action.
Role groups are easier to scan than long unstructured lists.
Use a consistent naming pattern
Pick one convention and keep it everywhere.
For example, --site-text-primary and --site-bg-surface.
- Prefix by project or theme.
- Add role first, state second.
- Avoid abbreviations teammates may misread.
Separate core and optional tokens
Keep the main set short, then add optional tokens only when needed.
This prevents token bloat on small projects.
Review variables during each UI update
When adding new components, check if an existing token already fits.
Only create a new variable when a real repeated role appears.
Useful for
- New small business websites.
- Landing page bundles with shared components.
- Freelance projects with recurring style updates.
Keep structure small and clear
You do not need enterprise-scale tokens—just enough structure to keep changes predictable.