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