2nd/10_Wiki/Topics/Frontend/모듈식 CSS(Modular CSS).md

---
id: wiki-2026-0508-모듈식-css-modular-css
title: 모듈식 CSS (Modular CSS)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Modular CSS, CSS Modules, Component CSS, Scoped Styles]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [css, modules, frontend, architecture]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: css
  framework: build-tools
---

# 모듈식 CSS (Modular CSS)

## 매 한 줄
> **"매 modular CSS = scope by component, not by selector convention"**. 매 BEM/SMACSS — 매 naming convention — 매 human discipline. 매 modern (2026) = 매 build-time scoping (CSS Modules, Vue/Svelte SFC, CSS-in-JS, Tailwind utility, `@scope` native).

## 매 핵심

### 매 진화
1. **Global** (no scope) — 매 conflict 지옥.
2. **BEM/SMACSS** — naming convention — 매 human-enforced.
3. **CSS Modules** — build-time hash — 매 automated.
4. **CSS-in-JS** (Emotion, styled-components) — 매 runtime + scope.
5. **Tailwind utility** — 매 inline atomic.
6. **Native `@scope`** (Chrome 118+) — 매 browser scope.
7. **Shadow DOM** — 매 web component native scope.

### 매 트레이드오프
- 매 scope 강도 vs runtime cost vs DX.
- CSS Modules — 매 zero runtime, 매 build only.
- CSS-in-JS — 매 dynamic, 매 runtime cost.
- Tailwind — 매 zero CSS bundle (used 만), 매 HTML 매 noisy.

### 매 응용
1. Design system component library.
2. Multi-team monorepo (style 충돌 방지).
3. SSR/streaming (critical CSS extraction).

## 💻 패턴

### CSS Modules
```css
/* Button.module.css */
.button { padding: 0.5rem 1rem; border-radius: 4px; }
.primary { background: #3b82f6; color: white; }
```

```jsx
import styles from './Button.module.css';
export const Button = () =>
  <button className={`${styles.button} ${styles.primary}`}>Click</button>;
// 매 빌드 후: class="Button_button__a1b2c Button_primary__d3e4f"
```

### Native @scope (modern)
```html
<style>
  @scope (.card) {
    h2 { color: #111; font-size: 1.25rem; }
    /* 매 .card 내부 h2 만 — 매 outer h2 의 X */
  }
</style>
<article class="card">
  <h2>Title</h2>  <!-- 매 styled -->
</article>
<h2>Outside</h2>  <!-- 매 unstyled -->
```

### Vue SFC scoped
```vue
<template>
  <button class="btn">Click</button>
</template>
<style scoped>
.btn { padding: 0.5rem 1rem; }
/* 매 빌드: .btn[data-v-abc123] — 매 component 만 */
</style>
```

### Svelte (auto-scoped)
```svelte
<button>Click</button>
<style>
  button { padding: 0.5rem 1rem; }
  /* 매 빌드: button.svelte-abc123 — 매 자동 */
</style>
```

### Tailwind utility (atomic)
```jsx
<button className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600">
  Click
</button>
/* 매 component CSS file 의 X — 매 utility 만 */
```

### CSS-in-JS (Emotion)
```jsx
import { css } from '@emotion/react';

const buttonStyle = css`
  padding: 0.5rem 1rem;
  background: ${props => props.primary ? '#3b82f6' : '#fff'};
`;

<button css={buttonStyle} />
```

### CUBE CSS (modern hybrid)
```css
/* Composition + Utility + Block + Exception */
.card {
  /* Block */
  display: grid;
  gap: 1rem;
}
/* Utility */
.[--flow-space\:1rem] > * + * { margin-top: 1rem; }
/* Exception (data attr) */
.card[data-variant="dense"] { gap: 0.5rem; }
```

### Layered cascade (`@layer`)
```css
@layer reset, base, components, utilities;

@layer reset { /* normalize */ }
@layer base { body { font: 16px/1.5 system-ui; } }
@layer components { .button { ... } }
@layer utilities { .text-center { text-align: center; } }
/* 매 specificity 매 layer order — 매 명확 */
```

## 매 결정 기준
| 상황 | 접근 |
|---|---|
| React/Next + zero runtime | CSS Modules |
| Vue/Svelte | SFC scoped |
| Rapid prototyping + utility | Tailwind |
| Design tokens + dynamic | CSS-in-JS (Emotion) OR vanilla-extract |
| Modern stack 매 native | `@scope` + `@layer` |
| Web Components | Shadow DOM |
| Legacy global stylesheet | BEM convention |

**기본값**: React = CSS Modules + Tailwind hybrid, Vue/Svelte = SFC scoped, multi-team = `@layer` + `@scope`.

## 🔗 Graph
- 부모: [[Large_Frontend_Projects|Frontend Architecture]]
- 변형: [[CSS Modules]] · [[CSS_Architecture_and_Styling|CSS-in-JS]] · [[CSS_Architecture_and_Styling|Tailwind CSS]]
- 응용: [[Design System]] · [[Component Library]]
- Adjacent: [[BEM]] · [[Shadow DOM]]

## 🤖 LLM 활용
**언제**: stack 결정, BEM → CSS Modules migration, `@scope` 사용 가능 여부.
**언제 X**: 매 design taste — 매 utility 매 readable 의 결정 — 매 team preference.

## ❌ 안티패턴
- **`!important` 매 conflict 우회**: 매 scope 누락의 sign.
- **Global selector + tag (`div p`)**: 매 cascade 충돌.
- **CSS-in-JS runtime cost 무시**: 매 LCP 영향.
- **BEM 끝없는 nesting** (`block__el--mod__sub`): 매 component 분리의 신호.
- **Tailwind class 50개 한 줄**: 매 component 매 추출.

## 🧪 검증 / 중복
- Verified (MDN @scope/@layer, CSS Modules spec, web.dev, Vue/Svelte docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — scope strategies + @scope native |