수정자 (m_)
SLUR UI System에서 수정자(m_)는
블록(Block) 또는 내부 요소의 상태나 변형을 표현하기 위한 규칙입니다.
수정자는 구조를 변경하지 않고, 조건에 따른 차이를 명확히 드러내는 역할을 합니다.
수정자의 정의
Section titled “수정자의 정의”수정자는 다음 조건을 만족합니다.
- 상태, 변형, 조건을 표현합니다.
- 구조를 생성하거나 변경하지 않습니다.
- 단독으로 의미를 가지지 않습니다.
수정자는 항상 기존 구조에 조건을 추가하는 용도로만 사용됩니다.
m_ 접두사의 의미
Section titled “m_ 접두사의 의미”m_ 접두사는
해당 클래스가 상태 또는 변형임을 명확히 표시하기 위한 표기입니다.
- 활성/비활성
- 크기, 밀도, 강조
- 의미 기반 상태(오류, 경고 등)
수정자는 구조를 설명하지 않으며,
구조에 대한 조건만을 표현합니다.
수정자 사용 원칙
Section titled “수정자 사용 원칙”수정자는 다음 원칙을 따릅니다.
- 항상 블록 또는 내부 요소와 함께 사용합니다.
- 단독 클래스 사용을 허용하지 않습니다.
- 구조 계층을 변경하지 않습니다.
- 시각적 표현을 직접 드러내지 않습니다.
수정자는 조건 표현 수단이지,
구조 설계 도구가 아닙니다.
상태 기반 수정자
Section titled “상태 기반 수정자”수정자는 상태를 표현하는 데 주로 사용됩니다.
- 열림 / 닫힘
- 선택됨 / 비활성
- 오류 / 성공
이러한 상태는
JavaScript 또는 데이터 속성에 의해 제어되며,
CSS는 상태를 해석해 스타일을 적용합니다.
시각적 표현과 수정자
Section titled “시각적 표현과 수정자”SLUR UI System에서는 시각적 표현을 직접적인 이름으로 사용하는 것을 지양합니다.
다만, 규칙화된 의미나 상태로 치환된 경우에 한해 허용합니다.
- ❌
.red,.big - ✅
.m_alert_error - ✅
.m_size_large
시각적 차이는
의미·상태·규칙을 통해 간접적으로 표현하는 것을 원칙으로 합니다.
수정자 설계 기준
Section titled “수정자 설계 기준”수정자를 설계할 때는 다음을 고려합니다.
- 구조 변경이 필요한가, 조건 표현이면 충분한가
- 내부 요소로 분리하는 것이 더 적절하지 않은가
- 상태가 명확히 정의되어 있는가
- 다른 수정자와 조합 시 충돌하지