네이티브 CSS 중첩

네이티브 CSS 중첩(2024년 기준 지원 기능, 모든 최신 브라우저에서 지원)을 사용하면 이전에는 Sass나 Less 전처리기에서만 가능했던 중첩 문법으로 CSS 규칙 안에 다른 CSS 규칙을 작성할 수 있습니다. 중첩된 규칙은 부모 선택자의 컨텍스트를 자동으로 상속합니다.

부모 규칙 블록 안에 자식 선택자를 작성하십시오. 브라우저가 부모 선택자와 자식 선택자를 자동으로 결합합니다. &(중첩 선택자)는 수정자와 의사 클래스를 위해 부모 선택자를 명시적으로 참조합니다.

&는 중첩된 규칙에서 부모 선택자를 명시적으로 나타냅니다. 의사 클래스(&:hover), 의사 요소(&::before), 수정자 클래스(&.active), 속성 선택자(&[disabled])에 사용하십시오. & 없이 중첩된 규칙을 작성하면 자손 선택자가 만들어집니다.

부모 요소 안에 의사 요소 규칙을 자연스럽게 중첩할 수 있습니다. .button { &::before { content: ""; } &::after { content: ""; } } 이 방식은 모든 버튼 스타일을 한곳에 배치하므로 평면적인 CSS에서 필요한 선택자 반복을 피할 수 있습니다.

미디어 쿼리와 기타 앳 규칙은 규칙 안에 중첩할 수 있습니다(Chrome 112 이상, Firefox 117 이상). .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }처럼 반응형 스타일을 파일 끝의 별도 미디어 쿼리 블록이 아니라 영향을 받는 요소와 함께 배치할 수 있습니다.

중첩은 명시도 규칙을 바꾸지 않습니다. 결합된 선택자는 평면적으로 작성했을 때와 동일한 명시도를 가집니다. 중첩으로 작성하든 평면적으로 작성하든 .card .title의 명시도는 동일하게 (0,2,0)입니다. 중첩은 문법을 편리하게 해 줄 뿐 명시도를 바꾸지 않습니다.

&가 없는 중첩 선택자는 자손 선택자를 만듭니다. .card { .title {} }는 .card .title로 변환됩니다. &를 사용하면 .card { &.active {} }가 .card.active로 변환됩니다(공백이 없으므로 자손이 아니라 수정자 클래스입니다).

네이티브 중첩은 BEM에 적합하지 않습니다. .block__element과 .block--modifier 선택자는 문자열이며, 중첩만으로는 &를 사용해 이러한 문자열을 만들 수 없습니다. BEM 문자열 연결에는 여전히 전처리기가 필요하므로, 중첩은 의사 클래스와 중첩된 컴포넌트 구조에 사용하십시오.

대부분의 Sass 중첩 문법은 네이티브 CSS 중첩과 동일합니다. 예외적으로 Sass에서는 &-modifier 문자열 연결을 허용하지만 네이티브 CSS에서는 허용하지 않습니다. &- 또는 &__ 패턴을 확인한 뒤 해당 규칙만 평면화하고 나머지 중첩은 유지하여 마이그레이션하십시오.

네이티브 CSS 중첩은 Chrome 112 이상, Firefox 117 이상, Safari 16.5 이상에서 지원됩니다. 이전 브라우저까지 지원하려면 빌드 과정에서 PostCSS와 postcss-nesting을 사용해 네이티브 중첩 문법을 평면적인 CSS로 변환하십시오. 그러면 지금 바로 네이티브 중첩으로 작성할 수 있습니다.

Chrome DevTools는 스타일 패널에서 중첩된 규칙을 중첩된 형태로 보여 줍니다. 중첩된 규칙을 클릭하면 소스 패널의 올바른 소스 위치로 이동합니다. 최신 DevTools에서는 중첩된 CSS도 평면적인 CSS만큼 명확하게 디버깅할 수 있습니다.

& 선택자를 사용한 중첩과 사용하지 않은 중첩은 어떻게 다른가요?

네이티브 CSS 중첩을 사용하면 일반 CSS에서도 Sass와 유사한 중첩 문법을 사용할 수 있습니다. & 선택자는 의사 클래스, 의사 요소, 수정자를 위한 복합 선택자를 만듭니다. 중첩된 @media 쿼리를 사용하면 반응형 스타일을 해당 요소와 함께 배치할 수 있습니다. PostCSS는 이전 브라우저를 위해 네이티브 중첩을 변환하므로 지금부터 점진적으로 도입할 수 있습니다.