CSS Nesting의 역사: 규칙 속 규칙과 늦게 온 선언

Summary

W3C의 2021년 첫 공개 CSS Nesting 초안은 부모 규칙 안에 자식 규칙을 두고 &로 부모를 가리켰다. 당시 중첩 규칙 뒤에 쓰인 선언은 무효였다.
2023년 초안은 선언과 규칙의 혼합을 허용했지만 상대적 순서를 보존하지 않았다. 2026년 초안은 중첩 선언 규칙으로 작성 순서를 지키도록 했다.

편집자가 카드의 테두리와 제목, 버튼을 손본다. 세 부분의 규칙이 한곳에 있으면 작업이 편하니 버튼 규칙을 카드 규칙 안에 옮긴다. 파일이 화면의 구조를 닮아 간다. 마지막으로 안쪽 규칙 아래에 색 한 줄을 보탠다. 종이 위에서는 분명 마지막 작업이다. 하지만 브라우저의 계산에서도 그렇게 남으려면 규칙이 필요하다. 방 안에 방을 만들었더니 도장공의 출근부를 다시 써야 했다.

2021년 8월 31일 첫 공개 초안은 자식 선택자를 부모 선택자에 대한 상대적 표현으로 다뤘다. &는 안쪽에서 부모를 부르는 표시였다. 초안은 직접 중첩과, 선택자 배치가 더 자유로운 @nest 경로를 함께 두었다. 이유는 문법의 갈림길이다. color:hover를 본 파서는 선택자를 읽는지 선언의 시작을 읽는지 곧장 가릴 수 없다. 문서는 경우에 따라 끝을 정하지 못한 채 앞을 더 읽어야 한다고 설명했다.

같은 2021년 문서는 늦은 선언을 단호하게 처리했다. 선언은 중첩 규칙 앞에 와야 했다. 뒤에 놓인 선언은 무효로 간주되어 버려졌다. 파일을 보기 좋게 정리하려고 한 줄을 아래로 옮기면 카드의 색이 사라질 수 있었다. 작은 방은 지을 수 있지만 도장공은 그 전에 퇴근해야 했다.

2023년 2월 14일 초안에는 별도의 @nest 문이 보이지 않는다. 선언과 중첩 규칙을 섞어 쓸 수 있게 됐다. 다만 문서는 이들의 상대적 순서가 보존되지 않는다고 적었다. 파일에서 읽히는 순서와 단계별 스타일 계산에서 쓰이는 순서가 어긋날 여지가 있었다. 도장공이 다시 들어오긴 했지만 대기표 번호를 잃은 셈이다.

2026년 1월 22일 초안은 대기표를 복구한다. 안쪽 규칙 뒤나 사이에 있는 선언을 중첩 선언 규칙으로 암묵적으로 감싸 그 위치를 보존한다. 단순히 & { ... }를 덧씌우면 가상 요소와 명시도에 영향이 생길 수 있어 그 방식으로 끝낼 수 없었다. 초안은 그 이유와 중간 단계의 @nest 포장 방식에서 현재 구조로 바뀐 경위를 설명한다. 브라우저 내부의 장부가 정교해지면서 작성자가 쓴 줄의 순서가 살아났다.

W3C 발행 연혁에는 2021년, 2023년, 2026년의 세 이정표가 나란히 있다. 겉으로 보이는 변화는 규칙을 안에 넣는 문법이다. 오래 걸린 과제는 뒤늦게 쓰인 한 줄의 의미를 확실히 하는 일이었다. 편집자는 어떤 규칙을 한집에 둘지 정한다. 브라우저는 부모와 자식의 주소, 그리고 마지막 붓질의 순서를 기록한다. 버튼 색을 현장 소장의 기억력에 맡길 필요가 없어진다.