CSS 아키텍처와 디자인 시스템 완벽 가이드

대규모 프로젝트에서는 CSS 아키텍처가 필수입니다. BEM 방법론, CSS-in-JS, 디자인 토큰으로 확장 가능한 스타일 시스템을 구축하세요.

CSS architecture is essential for large projects. Build scalable style systems with BEM methodology, CSS-in-JS, and design tokens.

BEM 방법론 BEM Methodology

BEM(Block, Element, Modifier)은 클래스 네이밍 컨벤션으로, CSS의 충돌을 방지하고 재사용성을 높입니다.

BEM (Block, Element, Modifier) is a class naming convention that prevents CSS conflicts and increases reusability.

                    /* Block: 독립적인 컴포넌트 */

                    .card { ... }

                    /* Element: Block의 일부 (언더스코어 2개) */

                    .card__title { ... }

                    .card__image { ... }

                    .card__body { ... }

                    /* Modifier: 상태나 변형 (대시 2개) */

                    .card--featured { ... }

                    .card__title--large { ... }

                    /* Block: Independent component */

                    .card { ... }

                    /* Element: Part of Block (double underscore) */

                    .card__title { ... }

                    .card__image { ... }

                    .card__body { ... }

                    /* Modifier: State or variant (double dash) */

                    .card--featured { ... }

                    .card__title--large { ... }

CSS 변수와 디자인 토큰 CSS Variables & Design Tokens

                    /* 디자인 토큰 정의 */

                    :root {

                      /* 색상 */

                      --color-primary: #3b82f6;

                      --color-secondary: #10b981;

                      --color-danger: #ef4444;

                      /* 간격 */

                      --spacing-xs: 4px;

                      --spacing-sm: 8px;

                      --spacing-md: 16px;

                      --spacing-lg: 24px;

                      /* 타이포그래피 */

                      --font-size-sm: 0.875rem;

                      --font-size-base: 1rem;

                      --font-size-lg: 1.25rem;

                    }

                    /* Design token definition */

                    :root {

                      /* Colors */

                      --color-primary: #3b82f6;

                      --color-secondary: #10b981;

                      --color-danger: #ef4444;

                      /* Spacing */

                      --spacing-xs: 4px;

                      --spacing-sm: 8px;

                      --spacing-md: 16px;

                      --spacing-lg: 24px;

                      /* Typography */

                      --font-size-sm: 0.875rem;

                      --font-size-base: 1rem;

                      --font-size-lg: 1.25rem;

                    }

CSS-in-JS (Styled Components) CSS-in-JS (Styled Components)

                    import styled from 'styled-components';

                    // 기본 버튼

                    const Button = styled.button`

                      padding: 12px 24px;

                      background: ${props => props.primary ?
                        '#3b82f6' : '#e5e7eb'};

                      color: ${props => props.primary ?
                        '#fff' : '#374151'};

                      border: none;

                      border-radius: 8px;

                      cursor: pointer;

                      &:hover {

                        opacity: 0.9;

                      }

                    `;

                    // 사용

                    <Button primary>Primary</Button>

🎨 CSS 아키텍처 선택 가이드 🎨 CSS Architecture Selection Guide

BEM: 전통적, 프레임워크 무관, 학습 용이
CSS Modules: 로컬 스코프, 빌드 타임 처리
CSS-in-JS: 동적 스타일, 컴포넌트 기반
Tailwind CSS: 유틸리티 우선, 빠른 프로토타이핑

BEM: Traditional, framework agnostic, easy to learn
CSS Modules: Local scope, build-time processing
CSS-in-JS: Dynamic styles, component-based
Tailwind CSS: Utility-first, rapid prototyping

💡 디자인 시스템 구축 팁 💡 Design System Building Tips

작게 시작: 색상, 타이포그래피, 간격부터
일관된 네이밍 규칙 사용
다크모드를 처음부터 고려
문서화와 예시 코드 필수

Start small: colors, typography, spacing first
Use consistent naming conventions
Consider dark mode from the start
Documentation and examples are essential

⚠️ 흔한 실수 ⚠️ Common Mistakes

너무 깊은 중첩 선택자 사용
!important 남용
하드코딩된 값 (토큰 미사용)
일관성 없는 네이밍

Using overly nested selectors
Overusing !important
Hardcoded values (not using tokens)
Inconsistent naming