버튼 색 하나를 바꾸려고 CSS를 고쳤는데, 화면은 요지부동입니다. !important를 붙여 봅니다. 그래도 안 바뀝니다. 결국 앞선 !important를 이기려고 또 !important를 얹고, 선택자를 길게 늘여 억지로 힘을 싣습니다. 이렇게 몇 달이 지나면, 그 누구도 화면 색 하나 마음 편히 못 바꾸는 코드가 남습니다. 스타일끼리 서로 이기려 드는 이 '힘겨루기'는, 사실 CSS가 우선순위를 정하는 방식 자체에서 비롯됩니다.
스타일은 왜 서로 이기려 드는가 — 명시도 전쟁
CSS는 같은 요소에 여러 스타일이 겹칠 때 '누가 더 구체적으로 지목했는가'를 따져 이긴 쪽을 적용합니다. 이걸 명시도(specificity)라고 합니다. id로 콕 집으면 class로 지목한 것보다 세고, class는 태그 이름만 부른 것보다 셉니다. 문제는 화면이 커지고 남의 라이브러리·플러그인까지 섞이면, 이 구체성 싸움이 걷잡을 수 없어진다는 데 있습니다. 내 스타일이 밀리지 않으려면 상대보다 더 구체적으로 써야 하고, 그 결과 선택자는 점점 길고 무거워집니다.
!important는 진통제였을 뿐이다
!important는 이 싸움에서 반칙에 가까운 필살기입니다. 명시도를 통째로 건너뛰고 무조건 이기게 만들죠. 당장은 통합니다. 하지만 다음 사람이 그 스타일을 바꾸려면 또 !important를 붙여야 하고, 그렇게 !important끼리 다시 싸움이 벌어집니다. 임시로 통증만 눌렀을 뿐, 병은 더 깊어집니다. 결국 '무엇이 왜 이기는지 아무도 설명 못 하는 코드'가 됩니다.
캐스케이드 레이어(@layer)는 '서열'을 미리 정한다
캐스케이드 레이어(@layer)는 싸움 자체를 없앱니다. 스타일을 몇 개의 '층'으로 나누고, 그 층들의 서열을 처음에 딱 한 번 선언해 두는 방식입니다. 예를 들어 '기본 초기화 → 외부 라이브러리 → 우리 디자인 → 개별 페이지 보정' 순으로 층의 순서를 정해 두면, 뒤 층이 앞 층을 언제나 이깁니다. 선택자가 얼마나 구체적이든 상관없습니다.
핵심은 '구체성이 아니라 층의 순서로 승부가 난다'는 점입니다. 우리 디자인 층에 태그 이름 하나로 소박하게 쓴 규칙이, 외부 라이브러리 층에 id로 요란하게 박아 둔 규칙을 깔끔하게 이깁니다. 더 이상 상대를 이기려고 선택자를 부풀리거나 !important를 남발할 이유가 없어집니다.
작은 회사 웹사이트에 왜 좋은가
이 기술은 손님 눈에는 보이지 않지만, 홈페이지의 '수명'을 좌우합니다.
- 수정이 예측 가능해집니다. '어느 층을 고치면 어디가 바뀐다'가 분명해져, 사장님이 나중에 색·글꼴을 바꿔 달라 요청해도 옆 화면이 엉뚱하게 망가지지 않습니다.
- 외부 도구와 덜 싸웁니다. 결제·예약 위젯 같은 남의 코드를 정해진 층에 가둬 두면, 그 스타일이 우리 디자인을 침범하지 못합니다.
- 유지보수 비용이 줄어듭니다. !important로 얽힌 실타래를 푸는 데 드는 시간이 사라져, 작은 수정을 빠르고 싸게 처리할 수 있습니다.
지금 써도 되나 — 브라우저 지원
@layer는 2022년 봄 크롬·사파리·파이어폭스 최신 버전에 모두 자리 잡아, 이미 실무에서 안전하게 쓰는 기능입니다. 아주 오래된 브라우저를 위해서는 레이어를 쓰지 않은 기본 스타일을 함께 깔아 두면, 기능이 없는 곳에서도 화면이 무너지지 않습니다.
작은 회사에게 이 기술이 뜻하는 것
캐스케이드 레이어는 화려한 효과가 아니라 '질서'를 만드는 기술입니다. 손님은 그 질서를 볼 수 없지만, 질서가 잡힌 코드는 몇 년 뒤 사장님이 홈페이지를 손볼 때 조용히 값을 합니다. 고칠 곳만 정확히 고쳐지고, 나머지는 흔들리지 않으니까요.
CYAN 에이전시는 이렇게 눈에 띄지 않는 코드의 질서까지 챙깁니다. 오늘의 화면을 예쁘게 만드는 것을 넘어, 사장님이 몇 년 뒤 직접 손볼 때까지 흔들리지 않는 홈페이지를 남기는 것 — 그것이 작은 회사에게 정말 오래가는 웹사이트라고 믿기 때문입니다.
