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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-모듈식-css-modular-css	모듈식 CSS (Modular CSS)	10_Wiki/Topics	verified	self	Modular CSS CSS Modules Component CSS Scoped Styles	none	A	0.9	applied	css modules frontend architecture		2026-05-10	pending	language framework css 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

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

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)

<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

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

Svelte (auto-scoped)

<button>Click</button>
<style>
  button { padding: 0.5rem 1rem; }
  /* 매 빌드: button.svelte-abc123 — 매 자동 */
</style>

Tailwind utility (atomic)

<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)

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)

/* 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)

@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
• 변형: CSS Modules · CSS_Architecture_and_Styling · CSS_Architecture_and_Styling
• 응용: 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