데이터 속성 전략
SLUR UI System에서는
UI 상태와 스크립트 제어를 위해
클래스가 아닌 **데이터 속성(data-*)**을 사용하는 전략을 채택합니다.
데이터 속성은 구조와 스타일을 침범하지 않는
중립적인 상태 전달 수단으로 사용됩니다.
데이터 속성의 역할
Section titled “데이터 속성의 역할”데이터 속성은 다음 역할만을 담당합니다.
- UI 상태 전달
- 스크립트 제어 대상 식별
- 구조와 동작 간 연결 고리 역할
데이터 속성은
구조를 정의하거나 스타일을 결정하지 않습니다.
데이터 속성 사용 원칙
Section titled “데이터 속성 사용 원칙”데이터 속성은 다음 원칙을 따릅니다.
- 구조를 변경하지 않습니다.
- 스타일을 정의하지 않습니다.
- 상태와 역할 전달 용도로만 사용합니다.
- 클래스 네이밍을 대체하지 않습니다.
데이터 속성은
CSS와 JavaScript 사이의 중간 계층으로 취급합니다.
상태 전달과 스타일의 관계
Section titled “상태 전달과 스타일의 관계”SLUR UI System에서는 상태와 스타일의 책임을 명확히 분리합니다.
- 데이터 속성은 상태를 전달합니다.
- CSS는 전달된 상태를 해석해 스타일을 적용합니다.
- JavaScript는 상태 변경만 제어합니다.
이 역할 분리는
UI 동작과 표현을 안정적으로 분리하기 위한 기준입니다.
데이터 속성 설계 기준
Section titled “데이터 속성 설계 기준”데이터 속성을 설계할 때는 다음을 고려합니다.
- 상태가 명확히 정의되어 있는가
- 클래스 네이밍으로 해결 가능한 문제는 아닌가
- 상태가 구조 변경을 유도하지 않는가
- 다른 상태와 충돌하지 않는가
상태가 복잡해질수록
구조 설계를 다시 점검해야 합니다.
데이터 속성 전략의 목적
Section titled “데이터 속성 전략의 목적”데이터 속성 전략은
UI 상태 관리를 단순화하고,
CSS와 JavaScript의 역할 충돌을 방지하기 위한 기준입니다.
상태 전달이 명확해질수록
UI 구조와 동작은 더 예측 가능해집니다.