2nd/10_Wiki/Topic_Programming/Frontend/유지보수 가능한 대규모 프론트엔드 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-설계	유지보수 가능한 대규모 프론트엔드 CSS 설계	10_Wiki/Topics	verified	self	Scalable CSS Architecture CSS at Scale Design System CSS	none	A	0.9	applied	frontend css architecture design-system		2026-05-10	pending	language framework css tailwind-css

유지보수 가능한 대규모 프론트엔드 CSS 설계

매 한 줄

"매 CSS 는 매 N 명 의 개발자 가 매 6개월 후 의 코드 base 에서 매 두려움 없이 수정할 수 있어야 한다". 매 대규모 CSS 의 적은 매 specificity 폭주, 매 dead code, 매 inconsistent spacing. 매 2026 의 정답 — utility-first (Tailwind 4) + design tokens + CSS Layers + container queries.

매 핵심

매 4 개 의 추상 레벨

• Tokens: color, spacing, typography 의 매 raw value (CSS custom property).
• Primitives: Box, Stack, Grid 의 매 layout primitive.
• Components: Button, Card, Modal — 매 design system 의 unit.
• Patterns: Page-level 조합.

매 방법론 비교

• BEM: .block__element--modifier. 매 명시적이지만 매 verbose.
• CSS Modules: 매 file-scoped, 매 collision 없음.
• CSS-in-JS: styled-components, Emotion — 매 runtime cost.
• Utility-first (Tailwind): 매 2026 의 default — 매 zero runtime, JIT.
• Vanilla Extract / Panda: 매 typed CSS, build-time.

매 응용

1. Design System 구축 (Material, Ant, Chakra).
2. Multi-brand whitelabel (token swap).
3. Dark mode / theming.

💻 패턴

Design tokens (CSS Custom Properties)

:root {
  --color-primary-500: oklch(60% 0.2 270);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --radius-md: 0.5rem;
  --font-body: "Inter", system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-primary-500: oklch(75% 0.2 270);
}

CSS Layers (cascade 제어)

@layer reset, base, components, utilities;

@layer reset { *, *::before, *::after { box-sizing: border-box; } }
@layer base   { body { font-family: var(--font-body); } }
@layer components { .btn { padding: var(--space-2); } }
@layer utilities { .mt-4 { margin-top: var(--space-4); } }

Tailwind 4 (CSS-first config)

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(60% 0.2 270);
  --spacing: 0.25rem;
}

<button class="bg-brand-500 px-4 py-2 rounded-md text-white">매 Click</button>

Container queries (매 layout-aware component)

.card-container { container-type: inline-size; }

.card { display: grid; grid-template-columns: 1fr; }

@container (min-width: 30rem) {
  .card { grid-template-columns: 200px 1fr; }
}

컴포넌트 + variants (CVA)

import { cva } from "class-variance-authority";

export const button = cva("rounded-md font-medium", {
  variants: {
    intent: {
      primary: "bg-brand-500 text-white",
      ghost: "bg-transparent text-brand-500",
    },
    size: { sm: "px-2 py-1", md: "px-4 py-2", lg: "px-6 py-3" },
  },
  defaultVariants: { intent: "primary", size: "md" },
});

Logical properties (i18n-ready)

.card {
  padding-inline: var(--space-4);   /* LTR / RTL 모두 동작 */
  margin-block-end: var(--space-2);
  border-inline-start: 2px solid var(--color-accent);
}

Style scoping (CSS Modules)

import styles from "./Card.module.css";
export const Card = ({ children }) => <div className={styles.card}>{children}</div>;

매 결정 기준

상황	Approach
New project (2026)	Tailwind 4 + CVA + design tokens
Existing BEM codebase	매 점진적 migration + Layers
Component library 출시	CSS Modules or Vanilla Extract
Multi-brand SaaS	CSS custom properties + theme swap

기본값: Tailwind 4 + CVA + CSS custom property tokens + Container queries.

🔗 Graph

• 부모: CSS_Architecture_and_Styling · Design System
• 변형: BEM · CSS Modules · CSS_Architecture_and_Styling
• 응용: CSS_Architecture_and_Styling · vanilla-extract · Theming
• Adjacent: 컨테이너 쿼리 (Container Queries)

🤖 LLM 활용

언제: 매 design system 구축, 매 large team, 매 multi-brand product. 언제 X: 매 single-page landing, 매 prototype.

❌ 안티패턴

• Specificity 전쟁: !important 남발 → 매 cascade 붕괴.
• Magic numbers: padding: 13px — 매 token 미사용.
• Global selector overuse: div > p > span — 매 brittle.
• Dead CSS: 매 unused selector 누적 → 매 bundle bloat.

🧪 검증 / 중복

• Verified (Tailwind 4 docs, MDN CSS Layers, CSS Tricks).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — scalable CSS 7 patterns