역할 분리 원칙

UI의 안정성을 위해 CSS, JavaScript, 데이터 속성의 역할을 명확히 분리합니다.

각 기술은 정해진 책임만 수행하며, 서로의 영역을 침범하지 않습니다.

---

역할 분리의 목적

역할 분리는 다음을 목표로 합니다.

• 수정 범위를 예측 가능하게 만듭니다.
• 코드 간 직접 의존을 줄입니다.
• 구조와 동작을 분리하여 유지보수를 단순화합니다.
• UI 변경이 다른 영역에 영향을 주지 않도록 합니다.

하나의 요소가 여러 책임을 동시에 가지는 구조를 지양합니다.

---

CSS의 역할

CSS는 보이는 결과만 정의합니다.

• 레이아웃과 배치
• 간격과 정렬
• 색상과 타이포그래피
• 상태 값에 따른 시각 변화

CSS는 다음 역할을 수행하지 않습니다.

• 상태 판단
• 데이터 처리
• 이벤트 제어

CSS는 상태 값에 “반응”할 뿐, 상태를 결정하지 않습니다.

---

JavaScript의 역할

JavaScript는 상태 변경과 동작 제어만 담당합니다.

• 사용자 입력 처리
• 상태 값 변경
• 이벤트 흐름 제어

JavaScript는 다음 역할을 수행하지 않습니다.

• 직접적인 스타일 정의
• 임의의 스타일 클래스 추가·삭제

JavaScript는 UI 구조를 수정하지 않고, 정해진 속성 값만 변경합니다.

---

데이터 속성의 역할

데이터 속성(data-*)은 상태를 표현하기 위한 중립적인 값 저장 영역입니다.

예

<button class="button" data-state="active"></button>

.button[data-state="active"] {background-color: #000;}

이 구조에서:

• JavaScript는 data-state 값을 변경합니다.
• CSS는 해당 값에 반응하여 스타일을 적용합니다.
• 클래스는 구조 정의 용도로 유지됩니다.

데이터 속성은 다음 기준을 따릅니다.

• 상태 값만 표현합니다.
• 구조를 정의하지 않습니다.
• 클래스 네이밍을 대체하지 않습니다.
• 스타일을 직접 작성하지 않습니다.

데이터 속성은 상태 전달 수단이며, 스타일은 항상 CSS에서 정의합니다.

---

역할 분리 기준 정리

역할 분리 기준은 다음과 같습니다.

• CSS는 결과를 정의합니다.
• JavaScript는 상태를 변경합니다.
• 데이터 속성은 상태 값을 저장합니다.

각 영역은 독립적으로 이해되고 수정될 수 있어야 합니다.

---

역할 분리의 결과

이 기준을 따르면 다음이 가능해집니다.

• 스타일 수정이 스크립트 변경을 요구하지 않습니다.
• 상태 로직 수정이 CSS 구조를 변경하지 않습니다.
• 클래스 네이밍이 구조 설명 역할을 유지합니다.
• 대규모 UI에서도 수정 영향 범위를 예측할 수 있습니다.