4장 CSS 구조화

CSS 아키텍처 선택 기준

CSS 방법론은 cascade 충돌, selector specificity, 중복 선언을 줄이기 위해 클래스 책임과 파일 경계를 정합니다.

Layer

base, layout, component, utility를 나눠 덮어쓰기 위치를 예측합니다.

카드, 버튼, 폼처럼 재사용 단위는 독립 class와 modifier를 둡니다.

.card__title--featured처럼 block, element, modifier 관계를 이름에 남깁니다.

#id, 깊은 descendant, !important가 늘면 구조가 무너지는 신호입니다.

OOCSS

media object처럼 구조 클래스와 skin 클래스를 분리해 HTML 변경 없이 재조합합니다.

BEM

block__element--modifier로 범위를 드러내고, block 밖 요소에 의존하지 않습니다.

SMACSS

base, layout, module, state, theme 파일로 is-active 같은 상태 규칙을 분리합니다.

유틸리티

.mt-4, .text-center처럼 단일 속성을 빠르게 조합하되 컴포넌트 의미 클래스와 섞습니다.

도입 신호

동일 버튼 CSS가 여러 파일에 복사되거나 새 화면에서 기존 selector를 피해 쓰기 시작하면 구조화합니다.

실패 신호

.page .list .item a처럼 깊어지거나 !important가 cascade 해결책이 되면 책임 경계를 다시 나눕니다.

검증 방법

컴포넌트 하나를 삭제했을 때 관련 class와 CSS도 함께 제거되는지, 미사용 selector가 남는지 확인합니다.