css 모듈 경계

CSS 모듈은 클래스 이름 충돌을 파일 단위로 막는다

Button.module.css의 클래스는 import한 컴포넌트 안에서만 해시된 이름으로 연결되어 전역 CSS와 역할이 분리됩니다.

local scope

styles.card처럼 가져온 클래스는 빌드 결과에서 고유한 이름으로 바뀌어 다른 card와 충돌하지 않습니다.

composition

기본 클래스와 selected, disabled 같은 상태 클래스를 배열이나 조건식으로 조합합니다.

global CSS

reset, body, theme 변수처럼 앱 전체 규칙은 일반 CSS에 두고 컴포넌트 모양은 모듈로 둡니다.

import

import styles from "./File.module.css" 형태로 가져옵니다.

name

클래스 이름은 역할 중심으로 짓고 전역 접두사에 기대지 않습니다.

state

상태별 클래스는 명확한 조건과 함께 붙입니다.

mix

전역 레이아웃과 모듈 스타일의 책임을 문서화합니다.