ガイド
小規模サイト向け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.