더 깔끔하고 읽기 쉬운 스타일링: CSS 네스팅(Nesting)

CSS를 작성할 때 우리는 계층 구조를 표현하기 위해 클래스나 선택자를 중첩하여 사용합니다.

하지만, 기존 CSS에서는 이를 직관적으로 표현하기 어려웠습니다.

CSS 네스팅(Nesting)은 하위 선택자 스타일을 부모 안에 중첩하여 작성할 수 있도록 하는 기능으로,

CSS의 가독성과 유지보수를 크게 향상시킵니다.

CSS 네스팅은 Sass, Less와 같은 전처리기에서 제공하던 기능을 네이티브 CSS에서 사용할 수 있도록 한 것입니다.

---

🧐 왜 CSS 네스팅이 필요한가요?

기존 CSS에서는 하위 선택자를 작성할 때 부모 선택자를 반복해야 했습니다.

기존 방식

.navbar {
  background-color: #333;
}

.navbar .menu {
  display: flex;
}

.navbar .menu .menu-item {
  padding: 8px;
}

 

이 방식은 간단한 프로젝트에서는 괜찮지만, 스타일이 복잡해질수록 선택자 중복으로 인해 코드가 길어지고 가독성이 떨어집니다. CSS 네스팅은 이 문제를 해결합니다.

---

🌟 CSS 네스팅의 기본 문법

CSS 네스팅은 중첩된 선택자를 부모 선택자 내부에 선언하여 구조를 표현합니다. 중첩된 선택자는 부모와의 관계를 기반으로 자동으로 해석됩니다.

예제: 네스팅 사용

.navbar {
  background-color: #333;

  .menu {
    display: flex;

    .menu-item {
      padding: 8px;
    }
  }
}

 

결과적으로 컴파일된 CSS는 다음과 같습니다:

 

.navbar {
  background-color: #333;
}

.navbar .menu {
  display: flex;
}

.navbar .menu .menu-item {
  padding: 8px;
}

 

---

🛠️ 간단한 예제: 네비게이션 스타일링

HTML 구조

<nav class="navbar">
  <ul class="menu">
    <li class="menu-item">Home</li>
    <li class="menu-item">About</li>
    <li class="menu-item">Contact</li>
  </ul>
</nav>

네스팅을 사용한 CSS

.navbar {
  background-color: #333;
  color: white;

  .menu {
    display: flex;
    list-style: none;
    padding: 0;

    .menu-item {
      padding: 10px 20px;
      cursor: pointer;

      &:hover {
        background-color: #555;
      }
    }
  }
}

결과

1. .menu-item은 .menu 내부에서만 스타일이 적용됩니다.
2. .menu-item:hover는 하위 항목에만 적용되는 상태 스타일을 쉽게 작성할 수 있습니다.

---

🎯 네스팅의 고급 사용법

부모 선택자 참조(&)

& 기호를 사용하면 현재 선택자와 관련된 스타일을 정의할 수 있습니다.

.button {
  color: white;
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.disabled {
    background-color: gray;
    cursor: not-allowed;
  }
}

조건부 선택자와 결합

CSS 네스팅은 미디어 쿼리와도 쉽게 결합할 수 있습니다.

.card {
  padding: 16px;

  @media (min-width: 600px) {
    padding: 32px;
  }

  .title {
    font-size: 1.5rem;

    @media (min-width: 600px) {
      font-size: 2rem;
    }
  }
}

 

---

🌟 CSS 네스팅의 장점

1. 코드 가독성 향상
   • 선택자 중복 없이 계층 구조를 명확히 표현.
2. 유지보수성 증가
   • 관련 스타일을 한 곳에 모아 관리하기 쉬움.
3. CSS 전처리기 의존도 감소
   • Sass, Less 같은 도구 없이 네이티브 CSS만으로 작업 가능.

---

🎯 주의할 점

1. 브라우저 지원
   • CSS 네스팅은 현재 일부 최신 브라우저에서만 지원됩니다. 사용 전에 Can I Use를 확인하세요.
   • 지원되지 않는 환경에서는 PostCSS 같은 도구를 활용하여 네스팅을 컴파일하세요.
2. 과도한 네스팅
   • 네스팅 레벨이 너무 깊어지면 오히려 가독성이 떨어질 수 있습니다. 3단계 이하로 제한하는 것이 좋습니다.

---

✨ CSS 네스팅, 이렇게 활용하세요!

CSS 네스팅은 특히 컴포넌트 기반 개발에서 빛을 발합니다. React, Vue와 같은 프레임워크와 결합하면 스타일 관리가 더욱 편리해집니다.