docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[CSS Architecture]]
|
||||
# [[CSS Architecture|CSS Architecture]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 아키텍처는 과거의 단순한 시각적 장식 계층에서 벗어나, 대규모 프론트엔드 프로젝트의 확장성과 유지보수성을 보장하기 위한 엄격한 엔지니어링 시스템입니다 [1]. 애플리케이션이 복잡해짐에 따라 흔히 발생하는 전역(Global) 네임스페이스 충돌과 'CSS 비대화(Bloat)' 같은 기술적 부채를 방지하는 것을 핵심 목적으로 합니다 [1, 2]. 현대의 CSS 설계는 BEM과 같은 수동적인 네이밍 규칙에서 출발하여, CSS Modules, Tailwind CSS와 같이 스코프(Scope)를 격리하고 모듈화를 강제하는 자동화 및 유틸리티 기반 접근법으로 진화했습니다 [3-5].
|
||||
@@ -16,8 +16,8 @@ CSS 아키텍처는 과거의 단순한 시각적 장식 계층에서 벗어나,
|
||||
최근의 엔터프라이즈 팀들은 단일 기술에 얽매이지 않고, 레이아웃과 간격 배치 등 속도와 일관성이 중요한 부분에는 Tailwind CSS를 사용하고, 고도로 복잡한 컴포넌트 스타일링에는 CSS Modules나 SCSS를 결합하는 하이브리드 접근법을 취하기도 합니다 [21-23]. 또한, 폰트 크기나 색상 등을 플랫폼에 종속되지 않는 '디자인 토큰(Design Tokens)'으로 추상화하여 관리함으로써 디자인 시스템과 CSS 아키텍처를 하나로 통합합니다 [24, 25].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[BEM (Block Element Modifier)]], [[CSS Modules]], [[Tailwind CSS]], [[Design Tokens]], [[Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** [[대규모 엔터프라이즈 프론트엔드 프로젝트]], [[컴포넌트 기반 아키텍처 (React, Next.js)]], [[디자인 시스템 구축]]
|
||||
- **Related Topics:** [[BEM (Block Element Modifier)|BEM (Block Element Modifier)]], [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]], [[Design Tokens|Design Tokens]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 프로젝트, 컴포넌트 기반 아키텍처 (React, Next.js), [[디자인 시스템 구축|디자인 시스템 구축]]
|
||||
- **Contradictions/Notes:**
|
||||
- CSS 설계에서 BEM은 이름 충돌을 방지하는 훌륭한 수단으로 소개되지만 [3], 최근 모던 프론트엔드 생태계에서는 CSS Modules가 클래스 이름의 격리를 자동으로 해결해주기 때문에 BEM의 수동적인 네이밍 컨벤션은 더 이상 필수적이지 않다는 시각이 존재합니다 [17, 26, 27].
|
||||
- Tailwind CSS는 빠른 개발 속도와 일관된 디자인 시스템을 장점으로 내세우지만 [19], 동시에 HTML 마크업이 지나치게 길어지며 과거의 '인라인 스타일(Inline CSS)'로 퇴보하는 것 같아 추상화 방식에 동의하지 않는다는 개발자들의 비판적인 의견도 분명하게 대립하고 있습니다 [20, 28, 29].
|
||||
|
||||
Reference in New Issue
Block a user