Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.0 KiB

Raw Blame History

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

title

유지보수 가능한 대규모 프론트엔드 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.

매 응용

Design System 구축 (Material, Ant, Chakra).
Multi-brand whitelabel (token swap).
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

5.0 KiB Raw Blame History