CSS Nesting이 드디어 네이티브 CSS에서 공식 지원됩니다. 기존에는 Sass(SCSS) 같은 전처리기를 사용해야 했지만, 이제는 순수 CSS만으로도 Nesting을 활용하여 더 간결하고 유지보수하기 쉬운 스타일을 작성할 수 있습니다. 이번 글에서는 CSS Nesting의 개념과 활용법을 자세히 알아보겠습니다.
1. CSS Nesting이란?
CSS Nesting은 부모-자식 관계를 중첩된 구조로 표현하여 코드의 가독성을 높이는 기능입니다.
기존 CSS에서는 자식 요소를 스타일링할 때 선택자를 반복적으로 작성해야 했지만, Nesting을 사용하면 더 직관적인 코드 작성이 가능합니다.
✅ 기존 방식 (Nesting 미적용)
.card {
background: #f5f5f5;
padding: 20px;
}
.card .title {
font-size: 20px;
font-weight: bold;
}
.card .content {
color: #333;
}
위 코드처럼 반복적으로 .card를 작성해야 하는 불편함이 있습니다.
2. 네이티브 CSS에서 Nesting 활용법
이제는 네이티브 CSS에서도 Nesting을 사용할 수 있습니다.
Nesting을 활용하면 코드가 더 깔끔하고 직관적으로 정리됩니다.
📌 Nesting 적용 예시
.card {
background: #f5f5f5;
padding: 20px;
& .title {
font-size: 20px;
font-weight: bold;
}
& .content {
color: #333;
}
}
✅ 주요 특징:
&기호를 사용하여 부모 요소를 참조- 불필요한 클래스명을 반복할 필요 없이 가독성이 향상
- 유지보수 및 코드 관리가 쉬워짐
3. 기존 Sass(SCSS) Nesting과 차이점
기존에는 CSS에서 Nesting을 사용하려면 Sass(SCSS) 같은 **전처리기(preprocessor)**를 활용해야 했습니다.
이제 네이티브 CSS에서도 Nesting을 공식적으로 지원하지만, Sass와는 몇 가지 차이점이 있습니다.
| 네이티브 CSS Nesting | Sass(SCSS) Nesting | |
|---|---|---|
| 별도 설치 필요 여부 | ❌ (기본 지원) | ✅ (Sass 설치 필요) |
| Nesting Depth 제한 | 🚨 무분별한 중첩 제한 권장 | 😎 자유로운 중첩 가능 |
| 기능 지원 범위 | ✅ @media, & 사용 가능 | ✅ 더 다양한 기능 지원 |
| 컴파일 과정 필요 여부 | ❌ (바로 사용 가능) | ✅ (컴파일 필요) |
✅ 결론: Sass를 사용하지 않고도 네이티브 CSS만으로 Nesting이 가능해졌으며,
Sass를 쓸 필요 없이 더 가볍고 효율적인 스타일링이 가능해졌습니다.
4. CSS Nesting 실전 활용법
📌 1) 미디어 쿼리와 함께 사용하기
CSS Nesting은 미디어 쿼리(@media)와 함께 사용 가능하여 반응형 디자인을 더 쉽게 만들 수 있습니다.
.button {
padding: 10px 20px;
background: blue;
color: white;
&:hover {
background: darkblue;
}
@media (max-width: 600px) {
& {
padding: 8px 16px;
}
}
}
✅ 기능 요약:
@media를 내부에서 정의 가능- 반응형 스타일을 더 구조적으로 작성 가능
📌 2) 다크 모드 스타일 적용
.theme {
color: #222;
background: #fff;
&.dark-mode {
color: #fff;
background: #222;
}
}
✅ 이점:
- 다크 모드와 일반 모드를 한 번에 정리 가능
.dark-mode가 추가될 때 자동으로 변경되는 구조
📌 3) 상태 기반 스타일 (Hover, Focus 등)
.input {
padding: 10px;
border: 1px solid #ccc;
&:hover {
border-color: blue;
}
&:focus {
border-color: red;
}
}
✅ 이점:
&:hover,&:focus등을 중첩 구조에서 바로 활용- 상태별 스타일을 더 직관적으로 작성 가능
5. CSS Nesting을 사용할 때 주의할 점
🚨 너무 깊은 중첩은 피하자!
Nesting을 남용하면 코드가 복잡해지고 성능에도 영향을 줄 수 있습니다.
❌ 잘못된 예시 (불필요한 중첩)
.container {
.wrapper {
.box {
.content {
color: red;
}
}
}
}
✅ 좋은 예시 (불필요한 중첩 제거)
.container .wrapper .box .content {
color: red;
}
⚡ 적절한 Nesting 깊이: 2~3단계까지만 유지하는 것이 좋습니다.
✅ 이제 네이티브 CSS에서 Nesting을 지원하므로 Sass 없이도 유지보수하기 쉬운 코드를 작성할 수 있습니다.
✅ 미디어 쿼리, 상태 기반 스타일, 다크 모드 적용 등 다양한 활용이 가능합니다.
✅ 과도한 Nesting은 피하고, 적절한 깊이에서 사용하면 유지보수성과 성능을 모두 챙길 수 있습니다.
CSS Nesting을 적극 활용하여 더 간결하고 효율적인 웹 스타일링을 만들어보세요! 🚀
