CSS Module 스코프 기준

컴포넌트 책임에 맞춘다

Button.module.css처럼 해당 컴포넌트의 구조와 상태를 가장 가까운 파일에 둔다.

전역 값 분리

색, 간격, font 같은 토큰은 CSS variable이나 전역 레이어에 두고 module은 배치와 상태를 맡긴다.

상태 class를 명확히 한다

active, disabled, selected 같은 상태를 boolean class 조합으로 읽히게 만든다.

범위

충돌 방지 같은 .title 이름도 파일별로 다른 class로 변환된다.

전역 이름 걱정이 줄어든다.

co-location

컴포넌트 근처 UI 구조와 스타일을 함께 읽을 수 있다.

공유 스타일은 별도로 추출한다.

tokens

공통 값 색과 spacing은 CSS variable로 공유하면 테마 변경이 쉽다.

module마다 숫자를 흩뿌리지 않는다.

dynamic

class 조합 상태별 className 조합은 명확하지만 과도한 조건문은 복잡해진다.

variant helper를 고려한다.

전역 남용 · 토큰 · 상태 점검

전역 남용 module 안에서 :global을 필요 이상으로 쓰고 있지 않은가.

토큰 같은 색과 간격 값이 여러 module에 하드코딩되어 있지 않은가.

상태 hover, focus, disabled 상태가 컴포넌트 책임 안에 정리되어 있는가.

CSS Module import 사용 예

import styles from './Card.module.css';

<section className={styles.card
        overflow-wrap: break-word;
        word-break: keep-all;
      }>...</section>