CSS @scope 활용하기

CSS를 쓸 때 가장 어려운 부분이 명시도(specificity)인 것 같다. BEM을 아무리 잘 따라도 사람이 사람과 코드를 짜는 이상 절대적인 컨벤션에 도달하기 어렵다고 생각한다. 만약 styled-components나 Tailwind 같은 툴을 쓰지 않는다면 CSS 클래스 네이밍에 신경써야 할 텐데, 이때 활용해볼 수 있는게 @scope다.

 

@scope는 CSS 규칙을 적용할 범위를 스코핑해주는 아주 중요한 키워드다. 투명한 선을 그어서 네 구역 내 구역을 나눠주는 셈이다.

 

클래스끼리 엮는 것보다는 명시도가 가장 낮은 DOM 엘리먼트를 타겟팅해야 하는 상황에서 더 빛을 발하는데, 예시로 아래처럼 사용할 수 있다.

@scope (.card) {
  img {
    border-color: green;
  }
}

 

이렇게 짜면 card 클래스명을 가진 엘리먼트에 한해 자식(card의 직계 자식이 아니어도 된다) <img> 태그에 스타일을 적용한다. 아래 이미지를 보면 <footer> 태그나 그 자식인 <p> 태그에 card 클래스가 붙어있지 않아서, <footer> 안의 <img> 태그에는 녹색 테두리가 적용되지 않은 것을 확인할 수 있다.

 

개발자툴에서도 보면 명확하게 @scope 키워드와 함께 특정 선택자에 대한 스타일을 따로 볼 수 있어서, CSS를 뜯어볼 때도 도움이 된다.

 

@scope 안에 또다른 @scope를 중첩하는 것도 가능하다. 아래 예시에서는 card의 자식들 중에서도 highlight 클래스가 있어야 title 클래스를 단 하위 자식이 color 요소를 가질 수 있다.

@scope (.card) {
  .title {
    font-size: 20px;
  }

  @scope (.highlight) {
    .title {
      color: blue;
    }
  }
}

 

물론 @scope 자체의 명시도가 같은 선상에 있다면 그중에서도 우선순위를 따져야 하지만, @scope를 사용하지 않은 경우에서 명시도를 다투는 것보다는 문제를 더 명확하게 파악할 수 있을 것이다.

 

 

참고:

• https://developer.chrome.com/docs/css-ui/at-scope