파일 배치

_base.css 문서 전체의 리셋, body 글꼴, a와 ul 같은 태그 기본값

_layout.css l-header, l-main-content, l-section처럼 화면의 큰 영역

_module.css main-nav, post-card, button처럼 반복해서 쓰는 컴포넌트

_state.css is-active, is-new처럼 현재 상태를 나타내는 짧은 클래스

OOCSS 관점 버튼의 크기와 여백은 button, 색상 차이는 button--primary처럼 조합합니다.

BEM 관점 post-card__title은 카드 안의 제목이고, post-card--featured는 카드의 변형입니다.

충돌 줄이기 누가 작성해도 l-, 블록 이름, is-의 역할이 달라 클래스 이름이 덮어씌워질 가능성이 줄어듭니다.

SMACSS 파일 분리 새 게시물 카드가 생기면 Module을 재사용하고, 특별 강조만 Modifier나 State로 추가합니다.