CSS :where()와 명시도 0의 조건

요약

2018년 2월 W3C 초안은 이름이 정해지지 않은 명시도 0의 의사 클래스를 기록했다. 같은 해 11월 초안에서 그 이름이 :where()로 정해졌다.
함수 안의 조건은 요소를 찾는 데 계속 쓰이지만 명시도에는 점수를 더하지 않는다. 괄호 밖의 클래스와 요소 선택자는 그대로 계산된다.

문제의 두 줄을 보자. a:not(:hover)는 마우스를 올리지 않은 링크에서 밑줄을 없앤다. 메뉴 담당자는 nav a로 내비게이션 링크의 밑줄을 되살리고 싶다. 파일 아래쪽에 써도 소용없다. 첫 규칙에는 의사 클래스가 있고, 두 번째에는 요소 선택자 둘뿐이다. CSS는 위치를 보기 전에 명시도를 센다. 그러면 누군가는 클래스를 하나 더 붙이고, 다음 사람은 더 긴 선택자를 만든다. 마지막에는 !important가 등장한다. 고작 밑줄 하나가 부서 간 협상 안건이 된 셈이다.

2018년 11월 21일 Selectors Level 4 초안은 바로 이 예시를 사용한다. 공통 규칙을 a:where(:not(:hover))로 쓰면 링크를 고르는 조건은 유지된다. 대신 :where() 안의 조건은 명시도를 올리지 않는다. 바깥의 a만 남고, 메뉴의 nav a가 이긴다. 공통 규칙이 제 몫을 하면서도 메뉴 담당자에게 자기 구역을 바꿀 여지를 남긴다. 선택자를 길게 늘이는 대신, 기본 규칙이 힘을 덜 쓴다.

이 발상은 이름보다 먼저 왔다. 2018년 2월 2일 초안에는 :matches()와 비슷한 명시도 0의 의사 클래스가 등장하지만 이름은 아직 미정이었다. 11월 초안에 :where()가 실렸고, CSS 작업 그룹의 발표도 그 명명을 분명히 적었다. 브라우저에게 요소 찾는 법을 새로 가르친 이야기가 아니다. 공유 규칙을 만드는 사람이 정확한 조건과 강한 우선권을 분리할 수 있게 된 이야기다.

선택자는 원래 두 일을 함께 한다. 어느 요소에 규칙을 적용할지 정하고, 선언이 충돌할 때 어느 쪽이 강한지도 결정한다. :where()는 첫 일은 그대로 두고 함수 내부의 점수만 0으로 만든다. 2022년 5월 7일 초안의 계산을 보면 .qux:where(em, #foo#bar#baz)의 명시도는 (0,1,0)이다. 괄호 안 ID들은 요소를 고르는 데 참여한다. 점수는 바깥의 .qux만 가져간다. 전체 선택자가 가벼워지는 마법이 아니라, 어디의 무게를 내려놓을지 고르는 장치다.

이 차이는 디자인 시스템에서 실용적이다. 공통 스타일은 링크나 버튼을 정확하게 찾아야 한다. 동시에 각 페이지는 메뉴나 폼을 자기 용도에 맞게 바꾸고 싶다. 공통 규칙이 처음부터 높은 명시도를 요구하면, 페이지마다 더 긴 선택자로 맞서야 한다. :where()를 선택한 공통 규칙은 기본값을 제시하고, 지역별 작성자가 보통의 CSS로 다음 결정을 내리게 한다. 브라우저는 모두에게 같은 계산을 적용한다.

2022년 11월 11일 초안은 관대한 선택자 목록의 파싱 규칙도 설명한다. 유효하지 않은 항목을 버리고 유효한 항목을 남길 수 있다는 내용이며, 실제 허용 범위는 명세의 문법을 따른다. W3C 발표 연혁은 2018년과 2022년의 초안 날짜를 확인해 준다. 그러나 이 기능을 가장 잘 기억하게 하는 것은 여전히 메뉴의 밑줄이다. 공유 규칙은 대상을 정확히 알아볼 수 있고, 그다음 선택은 현장의 작성자에게 넘길 수 있다.