CSS Module 경계

CSS 모듈은 컴포넌트 단위 스타일 계약을 만든다

클래스 이름 충돌을 피하는 것뿐 아니라 어느 컴포넌트가 어떤 스타일 책임을 갖는지 파일 구조로 드러냅니다.

범위

파일 스코프

클래스 이름은 빌드 시 고유해지므로 다른 컴포넌트와 우연히 충돌하지 않습니다.

compose

조합

공통 토큰은 변수와 유틸 클래스로 빼고 화면별 스타일은 모듈 안에 둡니다.

global

전역 예외

reset, 폰트, body처럼 전역 규칙만 남깁니다.

scss

확장

SCSS도 파일 경계와 클래스 책임을 유지합니다.

CSS Module 파일 경계

컴포넌트와 함께 이동해야 하는 스타일이면 CSS Module이 잘 맞습니다.

공유 클래스 재검토

여러 컴포넌트가 같은 클래스를 알아야 한다면 설계 단위를 다시 봅니다.

CSS Module의 핵심은 고유한 클래스명이 아니라 컴포넌트의 스타일 책임을 파일 경계로 고정하는 것입니다.