[css] Sass와 Less에서 중첩 사용하기

09 Sep 2021

Sass와 Less에서 중첩 사용하기

중첩(Nesting)은 CSS를 읽고, 확장하고 유지보수를 더 쉽게 해준다. 하지만 어떤 CSS시스템을 규모 측면에서 보자면 CSS를 중첩해 작성하는 것은 좋은 생각이 아니다. 몇 가지 일반적인 가정과 예를 들어 설명하겠다.

가정하기

빌드 툴이나 전처리기에 관계 없이, 대부분의 사람들이 동이할 수 있는 일반적인 좋은 CSS의 지침이 있다.

컴파일 된 CSS가 적을수록 좋다.
CSS는 구체적이지 않을 수록 좋다.
선택자는 적을수록 좋다.
컴파일 된 파일의 용량이 작을 수록 좋다.
컴포넌트 기반 CSS가 좋다.

위 내용을 염두에 두고 아티클을 작성했다.

요소 중첩 (Nesting elements)

나는 이것이 중첩의 가장 흔한 형태이고 아마도 대부분의 사이트에서는 괜찮다고 생각한다. 꼭 나쁘다고는 할 수 없지만, 이러한 중첩 구조는 CSS가 구체적이게 되며 명시도가 올라간다. 이것은 또한 재사용 가능한 컴포넌트를 만들기 어렵게 한다.

.parent {
  h1 { }
  span { }
  a { }
}

이 코드를 다음과 같이 개선할 수 있다.

.parent-heading { }
.parent-subheading { }
.parent-permalink { }

위 클래스는 명시도가 낮고, 선택자가 더 의미 있으며 컴포넌트 베이스로 작성되었다.

중첩 클래스

중첩 클래스는 컴포넌트 기반 관점에서는 올바른 방향이지만, 중첩과 함께 사용한다면 CSS의 명시도가 지나치게 높아지게 된다.

.parent {
  .parent-child { }
  .parent-child2 { }
  .parent-modifier { }
  .parent-modifier2 { }
}

자식 선택자를 캡슐화하는 부모 요소로 중첩 시켜두었다. 하지만 자식 선택자는 이미 스스로의 클래스만으로도 충분히 범위가 지정되고 있다.

부모 요소를 제거하고 다시 작성하는것이 좋다.

.parent-child { }
.parent-child2 { }
.parent-modifier { }
.parent-modifier2 { }

결과적으로 선택자의 수는 같지만 명시도는 더 줄어든다.

`&` 미중첩(Un-nesting)

CSS 중첩 기능중 제일 혼란스러운 것은 미중첩(Un-nesting) 예제일 것이다.

.child {
  .parent & { }
}

중첩 선택자의 끝에 & 을 사용할 경우, &은 모든것을 부모 선택자 앞 왼쪽에 놓는다. 따라서 위 예제는 .parent .child { } 와 같이 컴파일 된다. 이것은 몇가지 면에서 혼란을 야기한다.

일반적으로 &은 해당 선택자를 최상위 부모의 시작에 둔다.
일반적인 중첩 기능이 작동하는 방식과는 정반대다.
컴파일된 CSS에 대해 예측하는 것을 어렵게한다.

위 처럼 작성하는 대신 아래와 같이 작성할 수 있다.

.child { }
.child-modifier { }

그 결과, 컴파일된 CSS가 어떻게 나올것인지에 대해 보다 낮은 명시도와 명확한 통찰력을 가진 콤포넌트 기반 접근이 가능하다.

`&` 으로 중첩한 BEM

BEM 또는 다른 CSS 구조를 중첩으로 사용하는것은, 처음에는 도움이 되지만 유지보수를 어렵게 한다.

.block {
  &__element { }
  &--modifier { }
}

매번 .block 이라는 클래스를 쓰지 않음으로 소스 파일에 몇 바이트를 아낄 수 있지만, 선택자를 검색하기 어려워진다. 브라우저 개발자 도구로 디버깅할 때는 컴파일된 선택자를 확인한다. 그래서 .block__element 라는 선택자를 소스 코드에서 찾게될경우 알맞은 선택자를 찾기 어려울 것이다. 작성할 때는 쉽지만 불필요하게 인지 과부하를 가져온다.

대신 아래와 같이 간단하게 작성하자.

.block__element { }
.block--modifier { }

읽기 쉽고, 검색하기 쉽다.

`&` 으로 중첩한 가상 클래스

가상 클래스로 중첩하는것이 CSS에서 중첩을 사용할 수 있는 유일한 실용적 방법인 것 같다.

.btn {
  &:hover,
  &:focus { }
  &:active { }
}

앞선 예제와 다른 점은 이 모든것이 단지 서로 다른 상태만을 가지고 있는 하나의 요소와 선택자라는 점이다. 서로 다른 역할을 가진 여러개의 절반짜리 선택자가 아니다. 위 예제는 소스 파일에서 .btn을 검색하기만 하면 관련된 스타일을 모두 찾을 수 있어 검색이 매우 쉽고 직관적이게 된다.

추가로, 코드를 mixin과 extend 에 친화적인 환경으로 작성할 수 있다는 점은 더욱 매력적인 점이다.

Wrap up

만약 간단한 사이트를 만든다면 중첩 기능을 마음껏 활용할 수도 있겠지만, 규모가 큰 어플리케이션이나 사이트를 구축한다면 중첩 사용을 피하자. CSS를 단순하고 성능적이고 구문을 분석하기 쉬운 상태로 유지하자.