# [[CSS Architecture|CSS Architecture]]

## 📌 Brief Summary
CSS 아키텍처는 과거의 단순한 시각적 장식 계층에서 벗어나, 대규모 프론트엔드 프로젝트의 확장성과 유지보수성을 보장하기 위한 엄격한 엔지니어링 시스템입니다 [1]. 애플리케이션이 복잡해짐에 따라 흔히 발생하는 전역(Global) 네임스페이스 충돌과 'CSS 비대화(Bloat)' 같은 기술적 부채를 방지하는 것을 핵심 목적으로 합니다 [1, 2]. 현대의 CSS 설계는 BEM과 같은 수동적인 네이밍 규칙에서 출발하여, [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]]와 같이 스코프(Scope)를 격리하고 모듈화를 강제하는 자동화 및 유틸리티 기반 접근법으로 진화했습니다 [3-5].

## 📖 Core Content
현대의 프론트엔드 개발에서 CSS 설계는 "예쁘게" 만드는 것을 넘어, 여러 팀이 협업하고 프로젝트가 커져도 안정적으로 코드를 유지보수할 수 있는 구조를 구축하는 데 중점을 둡니다 [1, 2]. 이를 달성하기 위해 실무에서는 다음과 같은 구조 설계 방식과 전략을 활용합니다.

*   **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]] 구조:**
    BEM은 UI를 독립적이고 재사용 가능한 '블록(Block)', 블록에 종속된 '요소(Element)', 그리고 상태나 모양을 변경하는 '수식어(Modifier)'로 나누어 명명하는 CSS 방법론입니다 [3, 6-8]. 선택자를 평면적(Flat)으로 유지하여 깊은 DOM 중첩으로 인한 성능 저하를 막고, 스타일이 어느 컴포넌트에 속하는지 명확하게 알려줍니다 [9, 10]. 하지만 규칙을 사람이 직접 지켜야 하므로 프로젝트가 커질수록 실수가 발생하기 쉽고, 사용하지 않는 코드를 자동으로 제거(Dead code elimination)하기 어렵다는 단점이 있습니다 [11].
*   **CSS Modules를 통한 자동화된 캡슐화:**
    CSS Modules는 일반적인 CSS(또는 [[SCSS|SCSS]]) 문법을 작성하되, 빌드 시점에 고유한 해시값이 포함된 클래스 이름을 자동으로 생성하여 로컬 스코프(Local Scoping)를 보장하는 방식입니다 [12-14]. BEM이 가진 수동 네이밍의 한계를 해결하고 컴포넌트 간 스타일 충돌을 원천 차단하므로, 복잡한 애니메이션이나 세밀한 CSS 제어가 필요한 프로젝트에서 선호됩니다 [15-17].
*   **Tailwind CSS와 유틸리티 우선(Utility-First) 전략:**
    Tailwind는 `flex`, `pt-4`, `text-gray-500`과 같은 단일 목적의 작은 유틸리티 클래스를 HTML이나 JSX에 직접 조합하여 UI를 구성합니다 [18, 19]. 설정 파일에 디자인 토큰을 정의해두기 때문에 임의의 색상이나 간격이 무분별하게 늘어나는 것을 막아 시각적 일관성을 유지할 수 있습니다 [18, 20]. 사용된 클래스만 최종 빌드에 포함되므로 대규모 프로젝트에서도 CSS 파일의 크기가 일정 수준에서 더 이상 늘어나지 않는다는 강력한 이점이 있습니다 [18, 19].
*   **실무에서의 CSS 관리 및 아키텍처 통합 전략:**
    최근의 엔터프라이즈 팀들은 단일 기술에 얽매이지 않고, 레이아웃과 간격 배치 등 속도와 일관성이 중요한 부분에는 Tailwind CSS를 사용하고, 고도로 복잡한 컴포넌트 스타일링에는 CSS Modules나 SCSS를 결합하는 하이브리드 접근법을 취하기도 합니다 [21-23]. 또한, 폰트 크기나 색상 등을 플랫폼에 종속되지 않는 '디자인 토큰([[Design Tokens|Design Tokens]])'으로 추상화하여 관리함으로써 디자인 시스템과 CSS 아키텍처를 하나로 통합합니다 [24, 25].

## 🔗 Knowledge Connections
- **Related Topics:** [[BEM (Block Element Modifier)|BEM (Block Element Modifier]], CSS Modules, Tailwind CSS, [[Design Tokens|Design Tokens]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]
- **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 프로젝트, 컴포넌트 기반 아키텍처 (React, [[Next.js|Next.js]]), [[디자인 시스템 구축|디자인 시스템 구축]]
- **Contradictions/Notes:** 
  - CSS 설계에서 BEM은 이름 충돌을 방지하는 훌륭한 수단으로 소개되지만 [3], 최근 모던 프론트엔드 생태계에서는 CSS Modules가 클래스 이름의 격리를 자동으로 해결해주기 때문에 BEM의 수동적인 네이밍 컨벤션은 더 이상 필수적이지 않다는 시각이 존재합니다 [17, 26, 27].
  - Tailwind CSS는 빠른 개발 속도와 일관된 디자인 시스템을 장점으로 내세우지만 [19], 동시에 HTML 마크업이 지나치게 길어지며 과거의 '인라인 스타일(Inline CSS)'로 퇴보하는 것 같아 추상화 방식에 동의하지 않는다는 개발자들의 비판적인 의견도 분명하게 대립하고 있습니다 [20, 28, 29].

---
*Last updated: 2026-04-26*