CSS 네이티브 중첩(Nesting)으로 Sass 없이 스타일 쓰기 — 이제 브라우저가 알아서 한다

Sass를 쓰던 이유의 절반은 중첩(nesting)이었다. 부모 선택자 안에 자식 규칙을 넣어두면 관련된 스타일이 한눈에 모여서 관리가 편했으니까. 그런데 요즘 프로젝트에서 빌드 파이프라인을 걷어내다 보니 문득 이런 생각이 들었다. 이제 브라우저가 중첩을 지원하는데, Sass를 굳이 계속 써야 하나?

결론부터 말하면 안 써도 됐다. 네이티브 CSS 중첩은 이제 모든 주요 브라우저에서 Baseline으로 들어왔고, 전처리기 없이 .css 파일에 그냥 쓰면 된다.

뭐가 문제였나

중첩이 없으면 같은 컴포넌트 스타일이라도 선택자를 매번 처음부터 다시 써야 한다.

.card { padding: 16px; }
.card .title { font-size: 18px; }
.card .title:hover { color: royalblue; }
.card .body { color: #555; }

.card가 네 번 반복된다. 클래스 이름 하나 바꾸면 전부 고쳐야 하고, 관련 규칙이 파일 여기저기 흩어지기도 쉽다.

네이티브 중첩으로 바꾸면

이걸 그냥 중첩해서 쓸 수 있다. 전처리기 문법이 아니라 진짜 CSS다.

.card {
  padding: 16px;

  .title {
    font-size: 18px;

    &:hover {
      color: royalblue;
    }
  }

  .body {
    color: #555;
  }
}

Sass랑 거의 똑같아 보이는데 한 가지 다른 점이 있다. &가 붙지 않은 중첩 선택자(.title)는 내부적으로 자손 결합자로 해석된다. 즉 .card .title이 된다. &:hover처럼 부모 자체에 붙일 때는 &를 꼭 써야 한다.

미디어 쿼리도 그대로 중첩된다. 반응형 스타일을 컴포넌트 안에 붙여둘 수 있어서 편하다.

.card {
  padding: 16px;

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

Sass랑 딱 하나 다른 함정

옮기다가 걸렸던 게 있다. Sass에서는 클래스 이름을 이어붙이는 &-title 문법이 자주 쓰이는데, 네이티브 중첩에는 이게 없다.

/* Sass: .card-title 로 합쳐짐 */
.card {
  &-title { font-size: 18px; }
}

/* 네이티브 CSS: 문자열 연결 안 됨. 이렇게 쓰면 의도대로 안 나온다 */

BEM 스타일로 &-title 같은 이름을 많이 썼다면 이 부분은 그냥 풀어서 써야 한다. 나는 이 기회에 클래스 이름을 좀 정리했다.

정리

빌드 스텝 없이 .css 파일에서 중첩이 되니까, 간단한 사이드 프로젝트나 랜딩 페이지에서는 Sass를 아예 안 깔아도 됐다. 중첩·&·미디어 쿼리 정도만 쓰던 경우라면 옮기는 데 거의 시간이 안 든다. 다만 변수($)나 믹스인, &- 문자열 연결에 의존하고 있다면 그건 CSS 변수나 다른 방식으로 대체해야 하니 한 번은 훑어보는 게 좋다.