CSS Modules

CSS Modules 지역 스코프

Next.js에서 CSS 모듈을 사용하는 이유, 일반 CSS와의 차이, SCSS 조합 가능성을 스타일 책임으로 정리합니다.

module.css

지역 스타일 파일

Button.module.css처럼 컴포넌트 가까이에 스타일을 둡니다.

styles.name

명시적 사용

문자열 클래스 대신 import한 객체 속성으로 클래스 이름을 적용합니다.

Global 차이

충돌 감소

같은 title 클래스라도 파일별로 고유 이름이 되어 다른 컴포넌트를 덮지 않습니다.

CSS Modules 적용 판단

컴포넌트 단위 스타일이면 CSS Modules가 단순하다

전역 테마보다 특정 컴포넌트의 구조와 강하게 묶인 스타일은 모듈 파일로 옆에 두면 추적하기 쉽습니다.

CSS Modules 적용 순서

파일컴포넌트 이름과 맞춘 module.css 파일을 만듭니다.
importstyles 객체를 가져와 className에 연결합니다.
분리전역 리셋이나 공통 토큰은 global CSS와 역할을 나눕니다.