우리가 좋아하는 CSS 전처리기 기능 중 하나인 CSS Nesting이 이제 CSS 자체에 내장되었다. 2023년 구글 크롬 브라우저를 선두로 하여 다른 브라우저들도 하나 둘 씩 지원하기 시작했다. 더 이상의 선택자 노가다는 그만!

CSS Nesting이란?

Nesting은 중첩이라는 의미로, 말 그대로 CSS 선택자들을 중첩구조로 작성할 수 있는 기능을 의미한다. 기존 선택자 방식은 아래 자식 선택자를 선택하기 위해 단순 나열하는 구조로 작성해왔다.

지금까지는 CSS 전처리기인 SASS(SCSS), Less 등을 사용해야만 CSS Nesting을 사용할 수 있었다. 하지만, CSS 자체에 해당 기능이 내장이 되었고 올해부터 몇몇 브라우저들에서도 지원하게 되어 사용해 볼 수 있게 되었다. 덕분에 보다 더 선택자 간의 계층 관계를 명확하게 표현할 수 있다.

<div>
  <p>
  </p>
</div>

/* 기존 작성 방식 */
div {}
div > p {}

/* CSS Nesting */
div {
    & p {}
}

기존 작성 방식

CSS Nesting

그룹 선택기 :is()와 :where()

Nesting을 사용하지 않고 기존에 작성하던 방법 중 그룹 선택기인 :is()와 :where()이 존재한다. 이 가상 클래스들을 잠시 알아보자. :is()와 :where() 두 가상 클래스들 모두 ()안에 포함된 선택자 목록들이 선택할 수 있는 요소 전체를 선택한다.

/* 작성 */
main :is(li, button) {
  color: blue;
}
main :where(li, button) {
  color: red;
}

/* 해석 */
main li,
main button {
  color: blue;
}

기능에 차이는 없으며, CSS 점수 계산이 달라진다. :is()는 기존의 가상 클래스들과 같이 10점이 부여되는 반면에 :where()는 0점이 인정된다. 때문에 위와 같은 경우라면 13점인 :is()가 3점인 :where()를 이기고 color에 blue가 지정된다.

위의 예시를 CSS Nesting에서는 아래처럼 표현할 수 있다.

main {
  & li, button {
    color: blue;
  }
}

CSS Nesting 기본 문법

기존 작성 방식

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

CSS Nesting

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

미디어 쿼리 중첩 예제

/* 기존 작성 방식 */
.card {
  font-size: 1rem;
}

@media (width >= 1024px) {
  .card.large {
    font-size: 1.25rem;
  }
}

/* CSS Nesting */
.card {
  font-size: 1rem;
  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

미디어 쿼리를 사용할 때 CSS Nesting을 사용하게 되면, 멀리 떨어진 미디어 쿼리 블록을 찾아서 돌아다닐 필요가 없다.

잘못된 사용 예시

HTML 요소에는 & 기호가 태그 앞에 붙거나 :is()로 감싸져야 한다.

/* 잘못된 예시 */
.card {
  h1 {❌}
}

/* 올바른 예시 */
.card {
  & h1 {⭕}
}

.card {
    :is(h1){⭕}
}

중첩과 선언이 혼합되면, 선언은 중첩 이전에 작성된 것 처럼 맨 위로 끌어올려진다.

.card {
  color: green;
  & { color: blue; }
  color: red;
}

제일 마지막에 작성한 것으로 간주되는 blue가 .card의 color가 된다.

Sass의 생각은?

“우리의 언어 디자인이 CSS 자체의 개선에 영감을 줄 때마다 우리는 영광입니다. 더 많은 브라우저가 이 기능에 대한 지원을 계속해서 시작함에 따라 더 많은 CSS 작성자에게 네스팅의 유용성과 명확성 이점을 가져다 줄 수 있게 되어 기쁩니다.”

🔗

https://sass-lang.com/blog/sass-and-native-nesting/

Chrome 112 릴리스는 기본 CSS에서 중첩 기능을 지원 시작함. SASS 중첩에서 영감을 받음.
하지만, 기본 CSS 중첩과 SASS 중첩은 몇 가지 미묘한 호환성 차이가 있음.
현재는 Sass 중첩에 대한 변경 계획이 없으며, 일반 CSS 중첩 지원을 추가할 예정.
장기적으로 :is()의 글로벌 브라우저 시장 점유율이 98%에 도달하면 (현재는 약 96%) Sass의 동작을 변경할 계획이 있음.
Sass는 CSS와 더 잘 호환되는 표현 방법을 찾을 때까지 현재 동작을 유지할 것임.

현재 기준 브라우저 호환성은?

작성일(231102) 기준으로 모바일을 지원을 고려하지 않는 웹 사이트를 만든다면 CSS Nesting 기능을 바로 사용해도 좋다고 한다. 모바일 또한 삼성 인터넷을 제외 한다면 주요 브라우저에서는 지원하기 때문에 잘 판단해서 사용할 수 있을 듯 하다. 🙏빠른 업데이트 부탁드립니다!🙏