개요

현대 웹 개발에서 스타일 일관성 유지와 유지보수 효율성은 핵심 과제입니다. CSS Custom Properties(일명 CSS 변수)는 이러한 문제를 해결하는 강력한 도구로, 동적 테마 적용과 컴포넌트 기반 스타일링에 탁월합니다.

선언 방식

CSS 변수는 하이픈 두 개(--)로 시작하는 고유한 구문을 사용합니다. 전역 범위에서 사용하려면 :root 선택자에 정의하는 것이 일반적입니다.

:root {
  --brand-main: #6366f1;
  --brand-accent: #f43f5e;
  --spacing-unit: 8px;
}

지역 범위에서는 특정 선택자 내부에 선언하여 해당 요소와 자손에서만 접근 가능하게 할 수 있습니다.

.card-component {
  --card-radius: 12px;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

값 참조와 연산

var() 함수로 변수 값을 불러오며, 두 번째 인자로 대체값(fallback)을 지정할 수 있습니다.

.button-primary {
  background: var(--brand-main, #3b82f6);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

변수끼리 중첩 참조도 가능합니다:

:root {
  --ratio: 1.618;
  --base: 1rem;
  --scale-lg: calc(var(--base) * var(--ratio));
}

상속과 우선순위

CSS 변수는 캐스케이딩의 영향을 받습니다. 동일한 이름의 변수가 여러 레벨에 존재하면, 가장 가까운 조상의 값을 상속받습니다.

.theme-dark {
  --surface-bg: #18181b;
  --text-primary: #fafafa;
}

.theme-light {
  --surface-bg: #ffffff;
  --text-primary: #18181b;
}

.panel {
  background-color: var(--surface-bg);
  color: var(--text-primary);
}

JavaScript와의 상호작용

CSS 변수는 DOM API를 통해 런타임에 조작 가능합니다. 이 특성으로 실시간 테마 전환이나 사용자 설정 반영이 용이합니다.

// 변수 값 읽기
const accent = getComputedStyle(document.documentElement)
  .getPropertyValue('--brand-accent').trim();

// 변수 값 갱신
document.documentElement.style.setProperty('--brand-accent', '#10b981');

활용 전략

• 디자인 토큰 체계화: 색상, 타이포그래피, 간격 등을 변수화하여 디자인 시스템의 단일 진실 공원 확보
• 반응형 구현: 미디어 쿼리에서 변수 값만 교체하여 일관된 비율 유지
• 컴포넌트 변형: 수정자 클래스로 변수만 덮어씌워 스타일 변형 생성

@media (min-width: 768px) {
  :root {
    --spacing-unit: 12px;
    --container-max: 1200px;
  }
}

.badge {
  --badge-tone: var(--brand-main);
}

.badge-success {
  --badge-tone: #22c55e;
}

.badge-warning {
  --badge-tone: #eab308;
}