한 가지 색을 바꾸려고 스타일시트를 한참 뒤진다
버튼 하나의 글자색을 바꾸려는데, 그 버튼에 걸린 규칙이 파일 여기저기 흩어져 있어 한참을 헤맨다. 같은 카드의 제목과 본문, 테두리 스타일이 서로 떨어진 곳에 적혀 있으니 손볼 때마다 어디를 고쳐야 할지 가늠이 안 된다. 그래서 많은 개발자가 Sass나 Less 같은 전처리기(preprocessor)를 깔아 흩어진 규칙을 묶어 왔다. 그런데 이제는 그 빌드 도구 없이도, 브라우저가 직접 읽는 순수 CSS만으로 같은 일을 할 수 있다.
CSS 중첩이란 무엇인가
CSS 중첩(nesting)은 어떤 요소에 속한 규칙을 그 요소 안쪽에 그대로 끼워 넣어 적는 방식이다. 카드라는 큰 덩어리 안에, 그 안의 제목과 본문 규칙을 한 묶음으로 적어 둔다. 코드만 봐도 '이건 카드에 딸린 스타일'이라는 관계가 한눈에 드러나고, 같은 부품을 손볼 땐 그 묶음 한 곳만 열면 된다.
전처리기와 무엇이 다른가
겉모습은 Sass의 중첩과 거의 같다. 결정적 차이는 변환 단계가 사라진다는 점이다. 예전엔 Sass로 쓴 코드를 빌드 도구가 일반 CSS로 바꿔 줘야 브라우저가 읽었다. 이 한 단계를 위해 도구를 설치하고, 설정 파일을 관리하고, 버전이 어긋나면 빌드가 멈추는 일까지 떠안아야 했다. 이제는 그 모든 게 필요 없다. 작성한 CSS를 브라우저가 그대로 해석한다.
주의할 점 한 가지
중첩 안에서 부모 요소를 가리킬 땐 앰퍼샌드 기호를 쓴다. 또 규칙을 너무 깊이 겹쳐 쌓으면 나중에 그 스타일을 덮어쓰기가 까다로워진다. 두세 단계까지만 중첩하는 것이 읽기에도, 고치기에도 편하다.
작은 회사 사이트엔 어떤 의미인가
대부분의 소규모 사이트는 거대한 빌드 환경이 필요 없다. 그런데도 '스타일을 정리하려면 전처리기가 필수'라는 통념 탓에 불필요하게 무거운 설정을 떠안는 경우가 많았다. CSS 중첩은 그 진입장벽을 없앤다. 도구 설치도 빌드도 없이 스타일시트 한 장만으로 구조가 잡힌 코드를 쓸 수 있다. 나중에 다른 사람이 넘겨받아 고칠 때도, 부품별로 묶인 코드는 헤맬 일이 적다.
지금 써도 되는가
최신 크롬, 사파리, 파이어폭스는 이미 CSS 중첩을 폭넓게 지원한다. 아주 오래된 브라우저까지 챙겨야 하는 사이트가 아니라면, 새로 짜는 스타일부터 중첩을 적용해도 무리가 없다.
CYAN은 이런 표준 기술을 실무에 어떻게 녹여 가벼우면서도 오래 가는 사이트를 만들지 늘 고민한다. 화려한 도구를 더하기보다 꼭 필요한 것만 남겨 손보기 쉬운 코드를 넘기는 것 — 작은 회사의 웹사이트일수록 그 차이가 길게 남는다.