가이드
반복되는 색상에 CSS 변수를 사용하는 방법
반복 색상 값을 CSS 변수로 바꿔 수정 속도와 유지보수성을 높이는 방법입니다.
같은 HEX 값이 여러 선택자에 반복된다면 CSS 변수로 한 번에 관리할 수 있습니다.
Find repeated values first
Scan your CSS for colors that show up again and again.
Repeated values are the fastest wins for variable conversion.
Name variables by role, not shade
Use names like --brand-primary or --text-muted.
Role-based names stay useful even when the actual color changes later.
Define variables in :root
Store global colors in one :root block so every page can reuse them.
This keeps color updates centralized and predictable.
- Keep a consistent prefix.
- Group text, background, and action colors.
- Avoid duplicate variable names with slightly different values.
Replace hardcoded values in key components
Start with buttons, links, headings, and common surfaces.
After replacements, test hover and active states to catch missed values.
Document your starter token set
Add a short comment or style guide note for each variable role.
Clear notes help future edits stay consistent across files.
Best used for
- Small websites with repeated button and text colors.
- Landing pages with frequent visual updates.
- Teams that want cleaner handoff between design and code.
Start with repeats, then expand
Move your most repeated colors first, then gradually map the rest of your UI into reusable variables.