SMACSS 실습

블로그 예제의 클래스는 어느 CSS 파일에 둘까 여부

실습의 l-header, main-nav, post-card, is-active를 Base, Layout, Module, State로 나누면 파일 책임이 먼저 보입니다.

파일 배치
_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로 추가합니다.