CSS 중첩 쓰는 법 — Sass 없이 셀렉터를 겹쳐 쓰기
& 로 부모 셀렉터를 가리키는 법
Sass나 Less 같은 CSS 프리프로세서의 가장 인기 있는 기능이었던 중첩 규칙이 이제 네이티브 CSS에서도 지원됩니다. & 셀렉터를 사용하여 부모 컨텍스트를 참조하고, 관련 스타일을 논리적으로 그룹화할 수 있습니다.
빌드 과정 없이 CSS 파일의 구조를 더 읽기 쉽고 유지보수하기 좋게 만들어 주며, 모든 주요 브라우저에서 지원됩니다.
적용 방법
1
기존 CSS에서 관련 셀렉터를 부모 규칙 안에 중첩시킨다
2
& 셀렉터로 부모를 명시적으로 참조한다
3
미디어 쿼리나 @supports도 중첩하여 작성할 수 있다
4
Sass 전처리 의존성을 점진적으로 제거한다
장점
- ✓ 빌드 도구 없이 구조화된 CSS를 작성할 수 있다
- ✓ 프리프로세서 의존성을 제거하여 빌드 시간을 단축할 수 있다
단점
- ✗ 과도한 중첩은 셀렉터 특이성을 높여 CSS 충돌을 야기할 수 있다
- ✗ Sass의 변수, 믹스인 등 고급 기능은 대체하지 못한다
사용 사례
BEM 방법론 기반 컴포넌트 스타일을 깔끔하게 구조화
Sass에서 네이티브 CSS로의 점진적 마이그레이션