style lint selector-max-type: 0은 어떻게 작동할까?

 

0. 개요

업무 코드리뷰 중 동료분이 클릭 가능 여부에 따라 다른 스타일이 필요하여 다음과 같은 코드를 제시해주셨는데, style lint selector-max-type: 0에 걸려 에러가 발생하게 되었습니다.

selector-max-type 룰은 태그 선택자를 사용함으로 인해서 여러 컴포넌트가 중첩되어 있을 때 하위 컴포넌트의 스타일에 영향을 주는 걸 차단하기 위해서 적용해 두었습니다

&__content {
  background-color: #{$opacity-gray-16};
  
  &:where(button) {
    &:hover {
      background-color: #{$opacity-gray-24};
    }
    &:active {
      background-color: #{$opacity-gray-32};
    }
  }
}

그래서 아래와 같은 방법을 다시 제시해주셨는데, 기존의 &:where(button)와의 차이를 정확히 인지하지 못하여 selector-max-type에 대해 알아보려고 합니다.

&__content {
  background-color: #{$opacity-gray-16};
  
  &:where(button#{&}) { // button에서 button#{&}로 변경됨
    &:hover {
      background-color: #{$opacity-gray-24};
    }
    &:active {
      background-color: #{$opacity-gray-32};
    }
  }
}

 

1. 원인 접근 방법

먼저 항상 그렇듯 스타일린트 공식문서(selector-max-type docs)부터 살펴보았습니다.

선택기 목록의 각 선택기는 개별적으로 평가된다?!

공식 문서 초반부를 보면 다음과 같은 문구를 볼 수 있습니다

This rule resolves nested selectors before counting the number of type selectors. Each selector in a selector list is evaluated separately.

여기서 Each selector in a selector list is evaluated separately. (선택자 목록의 각 선택자는 개별적으로 평가됩니다.) 라는 문구가 눈에 띕니다.

어떤 선택자가 개별적으로 평가되는지 알아보기 전에 선택자의 종류가 무엇이 있는지 간단히 알아보도록하겠습니다.

 

선택자의 종류

선택자의 종류는 MDN에도 잘 나와있는데, 간단히 나열하자면 다음과 같습니다.

 

1. 기본 선택자
   1. 전체 선택자: 모든 요소를 선택합니다.(ex. *, ns|*, *|*)
   2. 요소 선택자: 특정 HTML 요소를 선택합니다. (ex. div, p, h1)
   3. 클래스 선택자: 특정 클래스가 있는 요소를 선택합니다.
   4. ID 선택자: 특정 ID가 있는 요소를 선택합니다. (ex. #id)
   5. 속성 선택자: 특정 속성을 가진 요소를 선택합니다. (ex. input[type="text"])
2. 그룹 선택자: 여러 선택자를 쉼표로 구분하여 한 번에 스타일을 적용합니다. (ex. h1, h2, p)
3. 자식 및 후손 선택자
   1. 자식 선택자: 특정 요소의 직계 자식을 선택합니다. (ex. ul > li)
   2. 후손 선택자: 특정 요소의 모든 후손을 선택합니다. (ex. div p)
   3. 일반 형제 선택자: 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 모두 선택합니다. (ex. p ~ span)
   4. 인접 형제 선택자: 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다. (ex. h2 + p)
   5. 열 선택자: 첫 번째 요소에 속하는 모든 두 번째 요소를 선택합니다. (ex. col || td)
4. 상태 선택자
   1. 의사 클래스 선택자: 특정 상태에 있는 요소를 선택합니다. (ex. a:hover, input:focus, li:first-child)
   2. 의사 요소 선택자: 요소의 특정 부분을 선택합니다. (ex. p::first-line, ::before, ::after)
5. 복합 선택자: 여러 선택자를 조합하여 더 구체적으로 선택합니다. (ex. div.classname > p#idname)

 

2. 에러 발생/미발생 경우 비교

선택자의 종류에 대해서도 알아봤으니, 이제 아래의 에러 발생/미발생의 두 가지 경우를 가져와서 비교해봤습니다.

.content {
  ...
  
  // 1. 성공한 경우
  &:where(button#{&}) {
    ...
  }
  
  // 2. 실패한 경우
  &:where(button) { 
    ...
  }
}

먼저 1번과 실패한 2번을 다음과 같이 컴파일된 코드로 변경해보겠습니다.

1. 성공한 경우: &:where(button#{&}) -> .content:where(button.content)
2. 실패한 경우: &:where(button) -> .content:where(button)

선택자는 개별적으로 평가된다고 했기에 성공한 경우는 의사 클래스 선택자로 이루어져 있고 의사 클래스 내부는 클래스 선택자로 이루어져 있기 때문에 성공한 경우의 선택자는 의사 클래스 선택자 + 클래스 선택자로 볼 수 있고, 선택자 종류가 중복되지 않기에 성공할 수 있었던 것입니다.

그런데, 이상하게 실패한 경우도 의사 클래스 선택자 + 태그(요소) 선택자로 이루어져 있어 "개별적으로 선택자가 평가된다면 성공해야 하는 게 아닌가?" 라는 의문이 생기게 됩니다.

 

3. selector-max-type: 0은 클래스 선택자만 허용한다

위 의문을 가지고 "selector-max-type이 0이면 다르게 평가되는 것일 수도 있겠다"라는 생각을 가지고 해당 문제에 대해서 찾아봤는데, 공식 문서나 구글링으로 답이 잘 나오지 않아 GPT에게 다음의 답을 얻을 수 있었습니다.

 

selector-max-type이 0이면 클래스 선택자만 허용한다

위 설명을 토대로 이제까지의 문제에 대입을 해보면 실패한 경우의 원인이 명확하게 드러나게 됩니다.

1. 성공한 경우: &:where(button#{&}) -> .content:where(button.content) -> 의사 클래스 선택자 + 클래스 선택자
2. 실패한 경우: &:where(button) -> .content:where(button) -> 의사 클래스 선택자 + 태그(요소) 선택자

실패한 경우에는 태그(요소) 선택자가 포함되어 있기 때문에 stylelint seleoctor-max-type: 0에 걸려 에러가 발생했던 것이었습니다.

그러나, 공식문서에는 관련 내용이 따로 없어서 GPT만 믿고 이대로 결론을 내버리기에는 찝찝해 위 설명을 기반으로 테스트해봤는데, 태그(요소) 선택자가 포함되어 있으면 style lint error를 발생시키는 것을 확인하였습니다.

 

4. 마치며

동료의 피드백을 통해서 selector-max-type과 선택자의 종류에 대해서 알아봤는데, 사내에서 적극적인 코드 리뷰를 통해 몰랐던 사실을 알게 되고 동료의 좋은 코딩 스타일도 흡수하면서 서로에게 좋은 시너지를 일으키고 있는 것 같아 요즘은 만족스러운 회사 생활을 해나가고 있습니다.

좋은 동료가 있음에 감사하고 새삼 GPT의 등장도 생산력에 큰 도움이 된다는 걸 다시 한 번 깨닫게 되네요.