[css] CSS 모듈

CSS 모듈 (CSS Modules)

CSS 모듈은 CSS 파일을 모듈 단위로 분리하여 컴포넌트별로 고유한 클래스 이름을 생성한다. 이를 통해 전역 네임스페이스 문제를 방지하고 스타일 충돌을 피할 수 있다.

일반적으로 .module.css 확장자를 사용하며, Next.js에서 기본적으로 지원한다.

예시

/* button.module.css */
.button {
  background-color: blue;
  color: white;
}

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

function MyButton() {
  return <button className={styles.button}>Click me</button>;
}

클래스 네임이 고유하게 생성되므로 스타일 충돌이 없다. 그러나 비교적 간단한 스타일링에 적합하며, 동적 스타일링에는 불편할 수 있다.