CSS Module

~18 min · CSS Modules, scoping, no conflicts

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Cascade tax 없는 class name

CSS Module 이 모든 class name 을 import 하는 file 에 scope. Build 가 class name hash 해서 Card.module.css 의 .button 이 다른 곳 .button 과 충돌 못 함. Runtime 에서 pure CSS — JS 없음, hook 없음, Server Component 에서도 작동.

사용법

File 이름을 *.module.css 로, default JS object 로 import, className={styles.button} 로 class name read. 안에 plain CSS rule; composes: 가 한 class 가 다른 거 inherit.

여전히 가치 있는 이유

Tailwind 가 modern app 의 styling 80% 처리하는데, CSS Module 은 design system 의 정교한 component-internal styling, animation, utility class 가 폭발할 pseudo-element trick 위해 win.

Code

Button.module.css·css

.button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.button:hover {
  background: #1d4ed8;
}

.primary {
  composes: button;
  font-weight: 600;
}

.danger {
  composes: button;
  background: #dc2626;
}

.danger:hover {
  background: #b91c1c;
}

Module 사용·tsx

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

export function PrimaryButton({ children }: { children: React.ReactNode }) {
  return <button className={styles.primary}>{children}</button>;
}

export function DangerButton({ children }: { children: React.ReactNode }) {
  return <button className={styles.danger}>{children}</button>;
}
// Built class name: 'Button_primary__a3b2c' — 항상 globally unique.

External links

CSS Modules

Exercise

CSS Module 과 composes: 사용해서 variant 셋 (primary, secondary, danger) 가진 button component 만들어. DevTools 에서 rendered class name 이 hash 됐고 conflict 없는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← 🔀 Route Handlers, Auth & Middleware퀴즈 · 4 questions Next →Tailwind CSS

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.