BEM · SMACSS · cascade 관리

CSS 아키텍처 선택 기준

CSS 규모가 커질수록 selector 깊이, specificity, class 책임을 관리해야 합니다. BEM과 SMACSS는 충돌을 줄이는 명명 계약입니다.

점검 축

01block 02module 03state 04utility

BEM

.nav__item--active처럼 block, element, modifier를 나눠 부모 selector 의존을 줄입니다.

SMACSS

base, layout, module, state, theme로 파일을 나누고 .is-open 같은 상태 class를 분리합니다.

Specificity

#app .page .card button처럼 깊어지거나 !important가 늘면 책임 경계를 다시 잡습니다.

Dead CSS

컴포넌트 삭제 뒤 관련 class를 함께 지울 수 없으면 이름과 파일 위치가 느슨한 신호입니다.