피드로 돌아가기
Dev.toFrontend
원문 읽기
JS 의존성 제거와 DOM 구조 기반의 선언적 레이아웃 설계
CSS :has() Selector: The Layout Trick I Wish I Knew 5 Years Ago
AI 요약
Context
부모 요소의 스타일을 자식 요소의 상태에 따라 변경하기 위해 JS 기반의 상태 관리와 수정용 클래스(Modifier Class)를 추가하는 파편화된 아키텍처 운용. CMS의 유동적인 콘텐츠 구조로 인해 하이드레이션 스크립트 및 복잡한 이벤트 리스너가 증가하며 유지보수 비용 상승.
Technical Solution
- CSS :has() 선택자를 활용하여 자식 요소의 존재 여부 및 상태에 따른 부모 요소의 스타일을 결정하는 상향식(Bottom-up) 스타일링 구현
- CMS 컴포넌트 배치 순서와 무관하게 특정 클래스(.btn--primary) 포함 여부로 Hero 섹션을 자동 판별하는 조건부 필터링 설계
- :target 가상 클래스와 :has()를 조합하여 별도의 JS 상태 동기화 없이 앵커 기반의 탭 네비게이션 상태 제어
- DOM 내에 이미 존재하는 상태(Attribute, Pseudo-class)를 스타일 드라이버로 활용하여 Glue Code 제거
- 전역 선택자 사용을 지양하고 직접 자식 선택자(>) 및 범위 제한을 통한 브라우저 렌더링 오버헤드 최소화
실천 포인트
- 부모 요소가 자식의 상태에 반응해야 하는 경우 JS 구현 전 :has() 적용 가능 여부 검토 - CMS 기반의 동적 레이아웃 설계 시 수정용 클래스 대신 콘텐츠 기반의 조건부 스타일링 채택 - 성능 최적화를 위해 `*:has()` 형태의 전역 선택자를 피하고 구체적인 클래스 범위 내에서 사용 - 점진적 향상법(Progressive Enhancement)을 적용하여 구형 브라우저에서도 핵심 기능이 유지되도록 설계