블록 규칙
SLUR UI System에서 블록(Block)은
UI 구조를 구성하는 가장 기본이 되는 독립적인 구조 단위입니다.
모든 UI는 하나 이상의 블록을 기준으로 설계됩니다.
블록의 정의
Section titled “블록의 정의”블록은 다음 조건을 만족하는 UI 구조 단위입니다.
- 단독으로 의미를 가집니다.
- 다른 구조에 의존하지 않습니다.
- 하나의 명확한 책임을 가집니다.
블록은 페이지, 레이아웃, 컴포넌트 등
UI를 구성하는 기준점으로 사용됩니다.
블록 사용 원칙
Section titled “블록 사용 원칙”블록은 다음 원칙을 따라 사용합니다.
- 블록은 항상 구조의 시작점이 됩니다.
- 블록은 다른 블록에 종속되지 않습니다.
- 블록은 중첩을 최소화하여 설계합니다.
- 블록 내부 구조는 내부 요소를 통해 표현합니다.
블록 간의 관계는 포함이 아닌 조합을 기준으로 설계합니다.
블록과 내부 요소의 관계
Section titled “블록과 내부 요소의 관계”블록 내부에는 내부 요소(i_, p_, l_)만 위치할 수 있습니다.
- 블록 → 내부 요소 → 수정자 순으로 구조가 구성됩니다.
- 내부 요소는 블록 없이 단독으로 존재할 수 없습니다.
- 블록은 내부 요소의 구조를 정의하는 역할만 수행합니다.
블록이 내부 요소의 역할을 대신하는 구조는 지양합니다.
블록 네이밍 기준
Section titled “블록 네이밍 기준”블록 이름은 다음 기준을 따릅니다.
- 시각적 표현이 아닌 역할과 의미를 기준으로 작성합니다.
- 색상, 크기, 위치와 같은 표현은 포함하지 않습니다.
- 하나의 블록은 하나의 책임만 가집니다.
블록은 접두사를 사용하지 않으며,
구조의 기준이 되는 이름으로 정의합니다.
블록 설계 시 고려 사항
Section titled “블록 설계 시 고려 사항”블록을 설계할 때는 다음을 고려합니다.
- 이 구조가 독립적으로 재사용 가능한가
- 책임이 과도하게 커지지 않았는가
- 다른 블록과 명확히 구분되는가
- 내부 요소로 분리하는 것이 더 적절하지 않은가
블록의 설계가 명확할수록
UI 전체 구조의 안정성이 높아집니다.
블록 규칙의 목적
Section titled “블록 규칙의 목적”블록 규칙은 UI 구조를 명확히 나누고,
재사용성과 유지보수성을 높이기 위한 기준입니다.
블록이 명확하게 정의되면
이후 모든 CSS 규칙과 네이밍, 상태 관리가 단순해집니다.