CSS 아키텍쳐와 BEM

1. CSS 아키텍쳐

1.1. CSS 아키텍쳐란?

CSS를 더 체계적이고 유지보수하기 쉽게 짜는 방법을 의미함.

1.2. CSS 아키텍쳐의 종류

• BEM (Block Element Modifier)
• OOCSS (Object-Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)
• Atomic CSS
• ITCSS (Inverted Triangle CSS)

실무에서는 BEM이 가장 많이 쓰이는데, 그 이유는

 

• 단순하고 명확해서 (클래스 이름만 봐도 구조가 눈에 보임)
• 협업에 강해서 (여러 명이 같은 코드 작업할 때 충돌이 적음)
• CSS 유지보수에 좋아서 (나중에 스타일 고칠 때 어디에 영향 가는지 예측 가능)
• 프레임워크랑 잘 어울려서 (React, Vue 같은 컴포넌트 개발할 때 BEM 스타일이 깔끔하게 어울림)

라고 함.

이름	핵심 아이디어	키워드
BEM	명확한 클래스 네이밍	__, --
OOCSS	구조(기능)과 디자인(모양) 분리. 재사용 가능 오브젝트처럼 작성.	재사용성
SMACSS	역할별 분리 (총 5가지 카테고리)	역할 (Base, Layout, Module, State, Theme)
Atomic CSS	스타일 조각화 (클래스 하나 = 스타일 하나)	Tailwind
ITCSS	기본적인 것부터 점점 아래 계층으로 내려가면서 세밀하게 설계	계층적 설계 (Settings > Tools > Generic > Elements > Objects > Components > Utilities)

1.2.1. OOCSS 예시

.box { padding: 10px; border: 1px solid #ccc; }
.profile-pic { width: 100px; height: 100px; }

 

 

2. BEM

CSS 아키텍처 중 하나로 Block Element Modifier의 줄임말임.

• Block: 독립적으로 의미를 가지는 큰 덩어리 (ex: card, menu)
• Element: Block 안에 들어가는 부분들 (ex: card__title, menu__item)
• Modifier: 상태나 버전을 표현하는 것 (ex: card--highlighted, menu__item--active)

2.1. BEM 기본 규칙

BEM에서는 꼭 다음과 같은 규칙을 따라야 함.

• 언더바 두 개(__)는 Block과 Element를 연결할 때 씀.
• 대쉬 두 개(--)는 Block이나 Element의 Modifier를 붙일 때 씀.

2.2. 사용 예시

다음과 같은 html 파일이 있을 때,

<div class="card card--highlighted">
  <h2 class="card__title">Title</h2>
  <p class="card__description">Description here</p>
</div>

다음과 같이 CSS를 작성하면

구조가 명확해지고 클래스 이름만 봐도 역할이 바로 보여서 나중에 유지보수가 쉬워짐.

.card {
  background: white;
  border: 1px solid gray;
}

.card--highlighted {
  background: yellow;
}

.card__title {
  font-size: 20px;
}

.card__description {
  font-size: 14px;
}