모듈 경계

CSS 모듈은 파일 경계를 명확히 할 때 효과가 크다

.module.css 안의 클래스는 컴포넌트 전용으로 닫고, 앱 전체 규칙은 별도 전역 CSS나 명시적인 global 규칙으로 분리한다.

클래스가 변환되는 경로

module import lookup hash
Card.module.css

짧은 클래스 작성

card, title, active처럼 컴포넌트 안에서만 의미 있는 이름을 쓴다.

.card { border: 1px solid }

Card.js

객체로 참조

문자열 클래스 대신 styles.card 값을 JSX에 전달한다.

className={styles.card}

browser

고유 이름 출력

빌드 결과에는 파일명과 해시가 섞인 클래스가 들어간다.

Card_card__x9m2