SLUR UI System에서 지양하는 패턴
SLUR UI System에서는
UI 구조를 흐리게 하거나 유지보수 비용을 증가시키는 패턴을
명확히 지양 대상으로 정의합니다.
이 문서는 “하지 말아야 할 것”을 기준으로 구조 판단을 돕기 위한 내용입니다.
역할이 모호한 클래스
Section titled “역할이 모호한 클래스”하나의 클래스가 여러 역할을 동시에 수행하는 패턴은 지양합니다.
- 구조와 스타일을 동시에 표현하는 클래스
- 상태와 레이아웃을 함께 담당하는 클래스
- 의미 없이 재사용되는 범용 클래스
역할이 모호해질수록
구조 해석은 어려워지고 수정 범위는 예측 불가능해집니다.
과도한 중첩 선택자
Section titled “과도한 중첩 선택자”스타일 범위를 제어하기 위한 깊은 중첩 선택자는 지양합니다.
- 구조 의미 없는 중첩
- 상위 구조에 강하게 의존하는 선택자
- 구조 변경 시 연쇄적으로 깨지는 스타일
중첩이 필요해질수록
구조 설계가 잘못되었을 가능성을 먼저 검토합니다.
시각적 표현 중심 네이밍
Section titled “시각적 표현 중심 네이밍”색상, 크기, 위치와 같은 시각적 표현을
직접적으로 드러내는 네이밍은 지양합니다.
- 시각적 표현은 의미·상태로 치환합니다.
- 값은 토큰과 변수로 관리합니다.
- 클래스 이름은 역할과 구조만 표현합니다.
시각적 표현 중심 네이밍은
UI 변경 시 구조 수정으로 이어질 가능성이 큽니다.
구조를 대체하는 JavaScript
Section titled “구조를 대체하는 JavaScript”JavaScript로 UI 구조를 임의로 변경하는 패턴은 지양합니다.
- 구조 생성·삭제를 스크립트에 의존하는 방식
- 클래스 네이밍 규칙을 우회하는 조작
- 상태 판단과 스타일 결정을 혼합하는 구현
SLUR UI System에서는
구조는 CSS와 마크업에서,
상태 제어는 JavaScript에서 분리합니다.
임의 값 사용
Section titled “임의 값 사용”토큰으로 관리되지 않는 임의 값 사용은 지양합니다.
- 반복되는 숫자 값
- 의미 없는 색상 코드
- 기준 없는 간격과 크기
임의 값이 늘어날수록
일관성과 유지보수성은 급격히 저하됩니다.
지양 패턴의 목적
Section titled “지양 패턴의 목적”이 지양 패턴들은
SLUR UI System의 규칙을 보완하는 안전장치 역할을 합니다.
“무엇을 할 수 있는가”만큼
“무엇을 하지 않는가”를 명확히 할수록
UI 구조는 더 단순하고 안정적으로 유지됩니다.