CSS Nesting

🛤️ CSS Nesting 이란?

CSS Nesting은 CSS 작성 시 선택자 간의 관계를 계층 구조를 통해 명확하게 표현할 수 있는 방법이자, 최신 CSS 기능 중 하나이다.
본래 CSS Nesting은 Sass와 같은 CSS 전처리기기를 통해 제공 받을 수 있는 기능이였으나, 무려 현재CSS에서 2023년 기준 따끈따끈하게 사용할 수 있게 되었다!

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.
https://www.w3.org/TR/css-nesting-1/

🌃 강력한 CSS Nesting 기능

• 먼저 이런 HTML 요소들이 부모,자손으로 설정되어 있다

      <div className="container">
        <div className="foo">
          난 첫번째야
          <div className="bar">난 두번째야</div>
        </div>
      </div>

Before

.container {
  background: blanchedalmond;
}

.container > .foo {
  color: red;
}

.container > .foo > .bar {
  color: blueviolet;
}

After

• 이제 중첩해서 선택이 가능하고 관련 스타일을 그룹화가 pure css로 가능해졌다
• 중첩될때 자식 요소의 &키워드를 명시적으로 붙여야 한다.

.container {
  background: blanchedalmond;

  & .foo {
    color: red;

   & .bar {
      color: blueviolet;
    }
  }
}

css nesting으로 구성

❌ 잘못된 중첩 예시

tagName을 중첩할때

• HTML 요소는 현재 앞에 & 기호가 있거나 :is()로 래핑되어 있어야 한다

  .card {
   h1 {
     /* 🛑 & 키워드나 :is 키워없이 태그선택 금지!*/
   }
  }

• 다음과 같은 구문으로 수정

.card {
  & h1 {
   
  }

  /* or */

  :is(h1) {
   
  }
}

BEM 패턴에서의 연결

• 많은 사람들이 CSS 네이밍 방법론 중 하나인 BEM 패턴을 사용하는데 해당 BEM 패턴을 CSS에 적용하면 어떻게 될까?
• CSS selector는 문자열이 아니라 객체 참조이므로 CSS 중첩에서는 작동하지 않는다

.card {
  &--header {
    /* ".card--header"가 선택 ❌ */
  }
}