커스텀 속성, 다크모드, 네이밍 규칙으로 재사용 가능하고 유지보수하기 좋은 스타일을 설계한다.

변수와 설계

프로젝트가 커질수록 색상, 간격, 글꼴이 여기저기 흩어져 관리하기 어려워집니다. 이 강의에서는 CSS 변수와 네이밍 규칙으로 일관되고 재사용 가능한 스타일을 설계하는 방법을 다룹니다.

학습 목표

커스텀 속성(--var)과 var()로 값을 한곳에서 관리한다.
변수로 테마와 다크모드를 구현한다.
BEM 같은 네이밍 규칙으로 클래스를 체계화한다.
재사용 가능한 스타일 구조를 설계한다.

커스텀 속성

--로 시작하는 이름에 값을 저장하고 var()로 불러옵니다. 보통 :root(문서 최상위)에 전역 변수를 정의합니다.

:root {
  --color-primary: #4c8bf5;
  --color-text: #1b1f29;
  --space-md: 16px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

값을 한 곳에서 바꾸면 그 변수를 쓰는 모든 곳에 반영됩니다.

var()는 두 번째 인자로 대체값을 받을 수 있습니다.

.box {
  color: var(--color-accent, #888); /* 변수가 없으면 #888 */
}

💡 TIP — 커스텀 속성은 상속됩니다. 특정 영역에서만 변수를 다시 정의하면 그 안에서만 값을 덮어쓸 수 있어, 컴포넌트 단위 테마에 유용합니다.

다크모드

변수를 활용하면 테마 전환을 손쉽게 구현할 수 있습니다.

:root {
  --bg: #ffffff;
  --text: #1b1f29;
}

[data-theme="dark"] {
  --bg: #15171c;
  --text: #e8eaf0;
}

body {
  background: var(--bg);
  color: var(--text);
}

<html data-theme="dark">로 속성을 바꾸면 색이 한 번에 전환됩니다. 시스템 설정을 따르려면 미디어 쿼리를 씁니다.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171c;
    --text: #e8eaf0;
  }
}

네이밍 규칙: BEM

BEM은 Block, Element, Modifier로 클래스 이름을 구조화하는 규칙입니다. 어떤 요소인지 이름만 봐도 알 수 있게 합니다.

.card { }              /* Block: 독립 컴포넌트 */
.card__title { }       /* Element: 블록의 일부 */
.card__button { }
.card--featured { }    /* Modifier: 변형/상태 */

구분	표기	예시
Block	`이름`	`.card`
Element	`블록__요소`	`.card__title`
Modifier	`블록--수식`	`.card--featured`

<div class="card card--featured">
  <h3 class="card__title">제목</h3>
  <button class="card__button">더보기</button>
</div>

재사용 가능한 설계

스타일을 역할별로 나누면 일관성과 재사용성이 올라갑니다.

/* 1. 토큰: 값의 출처 */
:root {
  --space-sm: 8px;
  --space-md: 16px;
}

/* 2. 유틸리티: 작고 단일 목적 */
.mt-md { margin-top: var(--space-md); }
.text-center { text-align: center; }

/* 3. 컴포넌트: 의미 있는 단위 */
.btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
}

⚠️ 주의 — 같은 값(예: #4c8bf5)을 여러 파일에 직접 적어두면 색을 바꿀 때 모두 찾아 고쳐야 합니다. 처음부터 변수로 묶어두면 한 줄 수정으로 끝납니다.

요약

커스텀 속성(--var)과 var()로 값을 한곳에서 관리합니다.
변수와 data-theme/prefers-color-scheme로 다크모드를 구현합니다.
BEM은 Block__Element--Modifier로 클래스를 구조화합니다.
토큰·유틸리티·컴포넌트로 역할을 나누면 재사용성이 높아집니다.

연습문제

주요 색상을 --color-primary로 정의하고 버튼 배경에 적용하는 규칙을 작성하세요.
var()에서 변수가 없을 때 회색 #888을 대신 쓰게 하려면 어떻게 작성할까요?
card 블록의 제목 요소를 BEM 규칙으로 명명하면?
다크모드에서 배경과 글자색을 바꾸려면 변수를 어디에 다시 정의해야 할까요?

힌트 — :root에 변수, var()의 두 번째 인자가 대체값, BEM 요소는 __, 다크모드는 별도 셀렉터에서 변수 재정의입니다.

💡 연습문제 풀이

불러오는 중…

변수와 설계

학습 목표

커스텀 속성

다크모드

네이밍 규칙: BEM

재사용 가능한 설계

요약

연습문제

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

✅ 복습 퀴즈

댓글 0