요약

  • W3C가 2021년 1월 19일 낸 CSS Cascade Level 5 첫 공개 초안에는 @layer가 들어 있었다. 작성자는 개별 선택자의 구체성을 겨루기 전에 스타일 규칙 묶음의 우선순위를 명시할 수 있게 됐다.
  • 2022년 1월 13일 후보 권고안 스냅샷에서는 일반 선언은 뒤의 레이어가 앞의 레이어를 이기고, !important 선언은 순서가 반대다. 명시적 레이어 밖의 일반 규칙은 암묵적인 마지막 레이어에 놓인다.

버튼 하나에 옷을 입히겠다는 팀이 셋이었다. 초기화용 스타일은 담백한 색을 원했고, 공용 구성 요소는 브랜드 색을 내밀었고, 페이지 담당자는 퇴근 전 수정안을 밀어 넣었다. 브라우저에는 충돌을 해결할 캐스케이드 규칙이 이미 있었다. 사람들은 자기 규칙을 이기게 하려고 선택자를 길게 썼다가, 다음 라이브러리가 오면 더 길게 썼다. 우선순위를 정해야 할 회의가 목소리 크기 대회로 바뀐 셈이다.

2021년 1월 19일 W3C 첫 공개 초안은 이 회의에 @layer라는 좌석표를 내놓았다. 작성자가 규칙을 레이어로 나누고 레이어 사이의 순서를 직접 정할 수 있다. CSS 작업 그룹의 발표는 각 레이어 안의 선택자나 구체성을 고치지 않고도 그룹의 순위를 정한다는 장점을 짚었다. 여러 스타일 파일이 우연히 어떤 순서로 놓였는지에 운명을 걸 필요도 줄었다.

초기화, 공용 라이브러리, 구성 요소, 페이지 수정 사항을 서로 다른 레이어에 둔다고 해 보자. 같은 속성을 두고 일반 선언끼리 다툴 때는 나중 레이어가 앞선 레이어보다 우선한다. 선택자의 구체성을 비교하는 단계는 그 뒤다. 앞선 레이어의 복잡한 선택자가 나중 레이어의 짧은 클래스 하나에 질 수 있다. 지역적 선택을 분명히 하려고 #id와 !important를 산처럼 쌓지 않아도 된다.

하지만 느낌표가 붙으면 좌석표를 거꾸로 읽는다. !important 선언끼리는 앞선 레이어가 뒤의 레이어를 이긴다. 2022년 1월 13일 W3C 후보 권고안 스냅샷은 캐스케이드 정렬 규칙에 일반 선언과 중요 선언의 두 방향을 적었다. 레이어 순위는 선택자 구체성보다 앞서 비교된다. 버튼이 왜 보라색인지 조사할 때는 먼저 어느 방향의 경기가 벌어졌는지 알아야 한다. 구체성만 세면 엉뚱한 승자를 찾는다.

명시적 레이어에 들어가지 않은 규칙에도 자리가 있다. 2022년의 규칙에서는 암묵적인 마지막 레이어로 간다. 일반 선언이라면 이름이 붙은 레이어의 일반 선언보다 세다. 레이어 계획 밖에 남아 있던 오래된 급한 수정이 정성껏 그린 좌석표를 가로지를 수 있다. 2021년 8월 29일 작업 초안은 첫 공개 초안 이후 이 바깥 규칙의 취급이 어떻게 바뀌었는지 기록했다. 좌석표 자체도 토론하며 고친 것이다.

같은 8월 초안에는 revert-layer도 등장한다. 속성의 값을 이전 레이어에서 받았을 값으로 되돌릴 수 있다. 레이어를 중첩하거나 가져온 스타일시트를 특정 레이어에 둘 수도 있다. 공용 토대와 구성 요소, 개별 페이지가 각각 어디까지 결정하는지를 선택자의 길이가 아니라 구조로 표현하게 된다. 선택자가 사이트 전체의 직급표를 대신 쓸 이유가 줄어든다.

W3C 발행 이력은 2021년 1월 첫 공개 초안에서 2022년 1월 후보 권고안 스냅샷까지의 순서를 보여 준다. 레이어 밖 규칙의 순위와 값을 되돌리는 방법은 그 사이 다듬어졌다. 그래서 뒤 문서의 세부 사항을 첫날부터 똑같이 존재했던 규칙처럼 읽으면 역사가 꼬인다. 끝까지 이어진 발상은 스타일 출처들 사이의 권한을 눈에 보이게 정한다는 것이었다.

브라우저는 여전히 버튼의 최종 색 하나를 계산한다. 같은 레이어 안에서는 구체성도 여전히 일을 한다. 달라진 것은 팀의 설명이다. 월요일에 누가 버튼을 보라색으로 만들었느냐고 물으면, 가장 긴 선택자를 찾아 헤매기 전에 레이어의 순서부터 가리킬 수 있다. 금요일 수정은 살아남았다. 이제 자기 자리에서 말한다.