css module

CSS 모듈 스코프

같은 button 클래스라도 컴포넌트별 CSS 모듈로 분리하면 빌드 과정에서 고유한 클래스 이름으로 변환됩니다.

파일 이름

Component.module.css처럼 모듈 파일임을 드러내는 이름을 사용합니다.

styles 객체

import한 객체의 속성으로 클래스명을 읽어 JSX의 className에 연결합니다.

전역 CSS 병행

reset이나 레이아웃 기본값은 전역 CSS에 두고 컴포넌트 세부 스타일은 모듈에 둡니다.

local

클래스가 해당 컴포넌트 주변에서만 쓰이는지 본다.

import

styles 이름으로 CSS 모듈을 불러왔는지 확인한다.

compose

여러 클래스를 조합할 때 문자열 조립을 명확히 한다.

global

공통 레이아웃은 모듈보다 전역 위치가 맞는지 판단한다.