모듈 범위

CSS 모듈

CSS 모듈을 쓰면 같은 이름의 클래스라도 빌드 과정에서 고유 이름으로 바뀌어 컴포넌트 단위 스타일을 더 안전하게 관리할 수 있습니다.

파일 규칙

Component.module.css 형태로 만들고 컴포넌트에서 styles 객체로 import합니다.

클래스 사용

className={styles.card}처럼 객체 속성으로 접근해 실제 생성된 고유 클래스명을 사용합니다.

혼용 전략

전역 리셋과 토큰은 일반 CSS에 두고 컴포넌트 모양은 CSS 모듈에 둡니다.

import

CSS 모듈 파일을 styles 같은 이름으로 가져왔는지 확인한다.

name

styles 안의 속성명이 CSS 클래스와 일치하는지 본다.

global

body, html 같은 전역 선택자는 일반 CSS에 남긴다.

범위

다른 컴포넌트의 같은 클래스명과 충돌하지 않는지 이해한다.