블록 규칙
블록(Block)의 정의와 계층상 위치는 구조 모델에서 다룹니다. 이 문서는 블록의 CSS 작성 규칙만 설명합니다.
블록 사용 원칙
섹션 제목: “블록 사용 원칙”블록은 다음 원칙을 따라 사용합니다.
- 블록은 항상 구조의 시작점이 됩니다.
- 블록은 다른 블록에 종속되지 않습니다.
- 블록은 중첩을 최소화하여 설계합니다.
- 블록 내부 구조는 내부 요소를 통해 표현합니다.
블록 간의 관계는 포함이 아닌 조합을 기준으로 설계합니다.
블록과 내부 요소의 관계
섹션 제목: “블록과 내부 요소의 관계”블록 내부에는 내부 요소(i_, p_, l_)만 위치할 수 있습니다.
- 블록 → 내부 요소 → 수정자 순으로 구조가 구성됩니다.
- 내부 요소는 블록 없이 단독으로 존재할 수 없습니다.
- 블록은 내부 요소의 구조를 정의하는 역할만 수행합니다.
블록이 내부 요소의 역할을 대신하는 구조는 지양합니다.
블록 네이밍 기준
섹션 제목: “블록 네이밍 기준”블록은 접두사를 사용하지 않으며, 구조의 기준이 되는 이름으로 정의합니다.
접두사 체계와 네이밍 근거는 접두사 기준표와 네이밍 시스템을 참고합니다.
블록 설계 시 고려 사항
섹션 제목: “블록 설계 시 고려 사항”블록을 설계할 때는 다음을 고려합니다.
- 이 구조가 독립적으로 재사용 가능한가
- 책임이 과도하게 커지지 않았는가
- 다른 블록과 명확히 구분되는가
- 내부 요소로 분리하는 것이 더 적절하지 않은가
재사용 단위로 블록 경계를 정한다
섹션 제목: “재사용 단위로 블록 경계를 정한다”블록의 경계는 “일반적으로 컴포넌트처럼 보이는가”가 아니라 그 요소가 실제로 어떻게 재사용되는가를 기준으로 정합니다.
개별 요소가 홀로 쓰이지 않고 항상 집합으로만 등장한다면,
재사용 단위는 그 집합입니다.
이때는 집합을 블록으로, 개별을 내부 요소(i_)로 둡니다.
- 카드가 늘 그리드로만 쓰인다 →
ref_grid(블록) >i_card(내부 요소) - 카드가 그리드·캐러셀·검색결과 등 여러 레이아웃에 쓰인다 → 카드를 독립 블록으로 두고 조합한다
“카드니까 당연히 블록”과 같은 관성으로 경계를 정하지 않습니다. 해당 프로젝트에서 그 요소가 홀로 쓰이는지를 확인한 뒤 정하며, 홀로 쓰이지 않으면 집합이 블록입니다.
종속이 기본인 이유 — 수정 비용
섹션 제목: “종속이 기본인 이유 — 수정 비용”실제 재사용이 아니라면 종속(내부 요소) 을 기본으로 둡니다.
- 내부 요소는 특정 블록 안에서만 쓰이므로, 수정 시 영향 범위가 그 블록으로 국소화됩니다 — 무엇이 깨질지 고민할 필요가 적습니다.
- 반대로 컴포넌트로 분리하면 어디에서 쓰이는지 추적해야 하므로 함부로 고치지 못하고, 사용처를 전부 확인하는 관리 비용이 계속 발생합니다.
그래서 “나중에 재사용될지 몰라서” 미리 컴포넌트로 빼지 않습니다. 재사용이 실증되기 전까지는 종속이 더 싸고 안전합니다.
블록 규칙의 목적
섹션 제목: “블록 규칙의 목적”블록 규칙은 UI 구조를 명확히 나누고, 재사용성과 유지보수성을 높이기 위한 기준입니다.
블록이 명확하게 정의되면 이후 모든 CSS 규칙과 네이밍, 상태 관리가 단순해집니다.