결과 기반 CSS
결과 기반 CSS는 작성 과정이 아니라 브라우저가 해석하는 최종 CSS 결과를 기준으로 구조를 판단하는 원칙입니다.
SLUR UI 방법론은 순수 CSS만으로 구조 문제를 해결하는 설계 방법론이며, 구조의 복잡성을 도구가 아닌 네이밍과 블록 모델로 해결합니다.
결과 기반 CSS는 소스 작성 방식이 아니라 실제로 적용되는 셀렉터 구조를 기준으로 설계하는 접근입니다.
- 구조 판단은 항상 최종 CSS 기준으로 이루어집니다.
- 셀렉터 구조는 명확하고 예측 가능해야 합니다.
- 결과 CSS만 보아도 전체 구조를 이해할 수 있어야 합니다.
왜 결과를 기준으로 하는가
Section titled “왜 결과를 기준으로 하는가”CSS는 최종적으로 브라우저가 해석하는 코드가 기준이 됩니다.
작성 과정이 아무리 정리되어 있어도, 결과 구조가 복잡하면 유지보수가 어려워집니다.
SLUR UI 방법론은 다음을 목표로 합니다.
- 구조가 셀렉터에 직접 드러날 것
- 클래스 이름만으로 역할을 예측할 수 있을 것
- 문서 없이도 CSS만 보고 구조를 파악할 수 있을 것
결과 기반 CSS는 다음 기준을 따릅니다.
- 구조는 최종 셀렉터 관계를 기준으로 설계합니다.
- 과도한 계층 의존을 만들지 않습니다.
- 선택자 깊이는 예측 가능한 범위 내에서 유지합니다.
- 구조 해석은 항상 CSS 결과 기준으로 검토합니다.
구조적 특징
Section titled “구조적 특징”결과 기반 CSS는 다음과 같은 특징을 가집니다.
- 구조 설계가 명시적입니다.
- 클래스 네이밍이 구조를 설명합니다.
- 코드 리뷰와 유지보수 기준이 일관됩니다.
- CSS 자체만으로도 구조를 이해할 수 있습니다.
결과 기반 CSS는 SLUR UI 방법론에서 구조 중심 사고를 실제 코드로 구현하기 위한 설계 원칙입니다.