같은 클래스 이름을 파일 경계에서 분리한다

작성자는 짧은 의미 이름을 쓰고, 빌드 결과는 충돌하지 않는 이름으로 연결된다. 지역 스타일과 전역 규칙의 책임만 명확히 나누면 된다.

01 · AUTHOR 파일마다 같은 이름 사용

Card → .title Profile → .title

이름을 전역에서 선점할 필요가 없다.

02 · BUILD 고유 클래스 생성

Card_title__… Profile_title__…

파일별 식별자가 더해져 이름 충돌을 막는다.

03 · USE import 객체로 연결

import styles from … styles.title

컴포넌트와 스타일의 의존 관계가 코드에 드러난다.

MODULE구조·상태

card, title, selected처럼 컴포넌트 내부에서 쓰는 클래스

GLOBAL앱 공통 기반

reset, typography, theme token처럼 여러 경계가 공유하는 규칙

RUNTIME동적 값

상태 class를 조합하고 연속 값은 CSS variable로 전달

경계의 정확한 의미: CSS Modules는 클래스 이름을 지역화하지만 Shadow DOM을 만들지는 않는다. 상속·전역 selector·CSS variable의 영향은 그대로 남는다.