CSS Modules

CSS Modules는 클래스 이름의 범위를 파일 단위로 가둔다

같은 .title이라도 모듈마다 해시가 붙기 때문에 전역 충돌을 줄이고 컴포넌트별 스타일 책임을 명확하게 만든다.

모듈 파일 Button.module.css.primary 정의전역 충돌 차단

컴포넌트 import stylesstyles.primary 사용오타와 범위 확인

규칙

좋은 사용

주의

지역 클래스

컴포넌트 전용

전역 선택자 남용

조합

명시적 class 결합

문자열 동적 생성

:global

외부 보정 최소

범위 누수

토큰

CSS 변수

색상 중복

핵심 CSS Modules의 효과는 스타일을 숨기는 것이 아니라 클래스 책임 범위를 작게 만드는 데 있다.