React · CSS Modules

CSS Modules가 만드는 스타일 범위

CSS Modules는 class 이름을 조금 다르게 쓰는 기술이 아니라, 컴포넌트 단위 스타일이 전역 class 충돌을 일으키지 않게 빌드 시점에 범위를 좁히는 방식이다.

01

파일 연결

컴포넌트 옆에 module.css를 두고 styles 객체로 import한다.

02

클래스 적용

className에 문자열 대신 styles.card 같은 속성을 전달한다.

03

빌드 변환

번들러가 class 이름을 고유한 이름으로 바꿔 충돌을 줄인다.

04

전역 분리

reset, font, CSS variable 같은 전역 규칙은 별도 파일에서 관리한다.

local class

컴포넌트 범위 다른 파일의 .title과 충돌하지 않음

DOM에는 변환된 이름 표시

composition

class 조합 상태별 class를 조건부로 합성

classnames 유틸 활용 가능

:global

전역 예외 외부 라이브러리 class 조정 등 제한적으로 사용

남용하면 장점 감소

tokens

공통 값 색, 간격, radius는 CSS 변수나 디자인 토큰으로 공유

모듈마다 색 하드코딩 방지

충돌 · 전역 규칙 · 조건부 점검

충돌 동일 class 이름을 여러 컴포넌트에서 써도 스타일이 섞이지 않는다.

전역 규칙 reset과 body 스타일은 module 안에 숨기지 않는다.

조건부 상태 class 조합이 undefined 문자열을 만들지 않는다.

토큰 공통 색상과 간격이 파일마다 임의로 복제되지 않는다.