CSS 네이티브 네스팅(native nesting) > 메모

.card {
  /* ... */
}
.card .title {
  /* ... */
}
.card .content {
  /* ... */
}
.card .button {
  /* ... */
}

네이티브 네스팅을 사용하면 부모 선택자 안에 자식 선택자를 중첩해 작성할 수 있어 코드가 훨씬 깔끔해져요.

.card {
  /* ... */
  .title {
    /* .card .title과 동일 */
  }
  .content {
    /* .card .content와 동일 */
  }
  .button {
    /* .card .button과 동일 */
  }
}

& 기호 사용

네스팅 규칙 안에서 부모 선택자를 참조할 때 & 기호를 사용해요. 이 기호는 상위 선택자를 나타내는 역할을 하며, 다음과 같은 다양한 방식으로 활용할 수 있어요.

.button {
  background-color: blue;
  &:hover { /* .button:hover와 동일 */
    background-color: darkblue;
  }
}

.item {
  /* ... */
  & + & { /* .item + .item와 동일 */
    margin-left: 10px;
  }
}

Sass/SCSS 네스팅과의 차이점

CSS 네이티브 네스팅은 Sass/SCSS와 매우 유사하지만, 몇 가지 중요한 차이점이 있어요.
태그 선택자 중첩: 네이티브 네스팅에서는 태그 선택자(예: h1, p)를 중첩할 때 & 기호를 사용해야만 정상적으로 작동해요. Sass에서는 태그 선택자를 바로 중첩할 수 있어요.

/* 네이티브 CSS */
.container {
  & h1 {
    /* ... */
  }
}

/* Sass (동일하게 작동) */
.container {
  h1 {
    /* ... */
  }
}

@media 규칙 중첩: @media 쿼리도 중첩할 수 있으며, 이 경우에도 @media 쿼리가 상위 선택자에 적용돼요.

.card {
  /* ... */
  @media (min-width: 768px) {
    /* 뷰포트 너비가 768px 이상일 때 .card에 적용 */
    flex-direction: row;
  }
}

지원 현황 네이티브 네스팅은 2023년 후반부터 크롬, 파이어폭스, 사파리 등 주요 브라우저에서 공식적으로 지원하기 시작했어요. 따라서 이제는 별도의 전처리 과정 없이도 네스팅 기능을 활용할 수 있어요. 장점은 다음과 같아요.

• 가독성 향상: HTML 구조와 유사하게 CSS 코드를 작성할 수 있어 코드를 읽기 쉬워져요.
• 유지보수 용이: 선택자의 반복을 줄여 수정이 필요한 경우 더 빠르게 찾고 변경할 수 있어요.
• 전처리기 의존성 감소: 빌드 프로세스 없이도 네스팅을 사용할 수 있어 개발 워크플로우를 간소화할 수 있어요.