[CSS] CSS 방법론 (BEM, OOCSS, SMACSS)과 설계 전략

이번 포스팅에서는 [CSS 아키텍처] 파트의 세부 주제인 협업과 유지보수를 위한 클래스 네이밍 규칙에 대하여 상세히 알아보겠습니다.

1. 블록, 요소, 수식어의 조화: BEM 방법론

BEM(Block, Element, Modifier)은 전 세계적으로 가장 널리 쓰이는 네이밍 규칙입니다. 이름만 봐도 해당 HTML 조각이 어떤 모듈에 속해있는지, 어떤 역할을 하는지 즉시 알 수 있습니다.

• Block (블록): 독립적인 컴포넌트의 루트 (예: card, nav, btn)
• Element (요소): 블록에 종속된 부품, 밑줄 두 개(__) 사용 (예: card__title, card__image)
• Modifier (수식어): 상태나 디자인 변화, 하이픈 두 개(--) 사용 (예: btn--primary, btn--large, card--active)

2. 객체 지향 CSS: OOCSS와 유틸리티 클래스

OOCSS는 구조(레이아웃)와 스킨(디자인)을 분리합니다. 버튼을 만들 때 모든 속성을 하나의 클래스에 때려 넣는 대신, 공통 골격과 컬러 테마를 나눕니다. (최근 Tailwind CSS와 같은 유틸리티 우선 방법론의 조상격입니다.)

/* 나쁜 예: 디자인과 레이아웃이 뭉쳐 있어 재사용이 힘듦 */
.buy-button { width: 100px; padding: 10px; background: red; color: white; }

/* OOCSS 패턴: 공통 구조와 디자인 스킨의 분리 */
.btn-base { padding: 10px 20px; border-radius: 4px; display: inline-block; } /* 구조 */
.theme-red { background: red; color: white; border: none; } /* 스킨 */

---

지금까지 BEM 방식의 네이밍과 OOCSS 구조/스킨 분리 철학에 대해 살펴보았습니다. 컴포넌트 단위 설계(Component-Driven)는 모던 웹 프론트엔드 프레임워크(React, Vue) 개발에서도 필수적인 개념입니다.