# CSSNestedDeclarations로 개선된 CSS Nesting

> Clean Markdown view of GeekNews topic #17182. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17182](https://news.hada.io/topic?id=17182)
- GeekNews Markdown: [https://news.hada.io/topic/17182.md](https://news.hada.io/topic/17182.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-10-11T09:47:30+09:00
- Updated: 2024-10-11T09:47:30+09:00
- Original source: [web.dev](https://web.dev/blog/css-nesting-cssnesteddeclarations)
- Points: 5
- Comments: 0

## Topic Body

- CSS 중첩(CSS Nesting) 사양에 `CSSNestedDeclarations` 인터페이스가 추가되어 중첩으로 인한 이슈들이 해결됨  
- 이 외에도 스타일 규칙 뒤에 오는 선언문들이 더 이상 위로 이동하지 않는 등의 개선 사항이 있음  
- Chrome 130 버전, Firefox Nightly 132, Safari Technology Preview 204 버전부터 적용됨  
  
### `CSSNestedDeclarations` 도입 이전의 CSS 중첩 이슈  
- 중첩된 선언문들이 예상과 다르게 동작하는 문제가 있었음  
```css  
.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}  
```  
- Chrome 130 이전 버전에서는 `background-color`가 `green`이 아닌 `red`로 적용됨  
- 파싱 이후 실제 적용되는 규칙은 아래와 같이 변경됨  
```css  
.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}  
```  
- `background-color: green;`이 다른 선언문들과 함께 위로 이동하고, 중첩된 `CSSMediaRule`이 `&` 선택자를 사용하는 추가 `CSSStyleRule`로 감싸짐  
- 이는 CSS 엔진이 스타일 규칙의 시작 부분에 나타나는 속성과 다른 규칙 사이에 나타나는 속성을 구별할 수 없기 때문  
  
### 해결 방안 - `CSSNestedDeclarations` 인터페이스 도입  
- CSS 작업 그룹은 이를 해결하기 위해 중첩 선언 규칙(nested declarations rule)을 도입함  
- Chrome 130부터 연속적으로 중첩된 선언문들을 자동으로 `CSSNestedDeclarations` 인스턴스로 감쌈  
- 이를 통해 `background-color: green` 선언문의 위치를 `background-color: red` 선언문 뒤로 유지할 수 있음  
- `CSSNestedDeclarations`는 부모 스타일 규칙과 동일한 요소 및 의사 요소와 일치하며, 특이성 동작도 동일함  
  
### 개발자에게 미치는 영향  
- Chrome 130부터 CSS 중첩이 크게 개선됨  
- 그러나 선언문과 중첩 규칙을 혼용한 경우 코드를 수정해야 할 수 있음  
```css  
/* Chrome 130에서 동작하지 않음 */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  
```  
- 위 코드는 `@starting-style` 선언문이 `CSSNestedDeclarations`에 포함된 선언문에 의해 덮어씌워져 entry animation이 제거됨  
- 아래와 같이 수정해야 함  
```css  
/* Chrome 130에서 동작함 */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  
```  
- CSS 중첩 사용 시 중첩 선언문을 중첩 규칙 위에 두면 대부분의 브라우저 버전에서 잘 동작함  
  
### `CSSNestedDeclarations` 기능 감지  
```javascript  
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarations를 지원하지 않음  
}  
```  
  
### GN⁺의 의견  
- CSS 중첩은 코드의 가독성과 유지보수성을 높여주는 유용한 기능임. 그러나 중첩 규칙과 선언문의 혼용으로 인한 이슈가 있었는데, `CSSNestedDeclarations` 도입으로 이 문제가 해결되어 다행임.  
- `CSSNestedDeclarations`가 도입되기 전에는 중첩 선언문의 위치가 변경되거나 의도치 않게 덮어씌워지는 문제가 있었음. 이는 개발자들에게 혼란을 줄 수 있는 부분이었음.  
- `@nest` 규칙을 사용하거나 중첩 선언문을 `CSSStyleRule`로 감싸는 등의 다른 해결 방안도 고려되었으나, 개발 경험의 저하 등의 이유로 채택되지 않았음. 중첩 선언 규칙의 도입이 가장 적절한 해결책으로 보임.   
- 다만 `CSSNestedDeclarations`는 아직 일부 브라우저에서만 지원되므로, 크로스 브라우징을 위해서는 중첩 선언문을 항상 중첩 규칙보다 위에 두는 것이 안전할 것 같음.  
- PostCSS, Sass 등의 CSS 전처리기에서도 `CSSNestedDeclarations`와 유사한 기능을 제공하고 있음. 전처리기를 사용 중이라면 해당 기능을 활용해볼 수 있을 것임.

## Comments



_No public comments on this page._