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