자식 테마 CSS 에 규칙을 썼는데 화면이 그대로입니다. 이때 손이 가장 먼저 가는 곳이 !important 인데, 그것을 붙이면 대개 즉시 해결됩니다. 문제는 다음 번에도, 그다음 번에도 붙이게 된다는 점입니다. 결국 스타일시트 전체가 !important 로 덮이고, 그 시점에는 우선순위를 조절할 수단이 남아 있지 않습니다.
먼저 왜 졌는지 확인합니다
브라우저 개발자 도구에서 요소를 선택하면 어떤 규칙이 이겼고 어느 파일 몇 번째 줄에서 왔는지가 그대로 보입니다. 진 규칙에는 취소선이 그어집니다. 추측하기 전에 이 화면을 먼저 봅니다 — 원인이 셋 중 하나로 좁혀집니다.
가장 흔한 원인은 첫 줄입니다. 자식 테마 스타일이 부모보다 먼저 출력되고 있으면, 똑같이 쓴 규칙이 부모에게 덮입니다. 2회차의 의존성 배열이 이것을 해결합니다 — 부모 핸들을 의존성으로 선언하면 우리 스타일이 항상 뒤에 옵니다.
부모가 아주 늦게 스타일을 등록하는 테마도 있습니다. 그럴 때는 우리 등록의 우선순위 숫자를 부모보다 크게 잡습니다. 다만 순서를 확실히 보장하는 것은 우선순위가 아니라 의존성 선언이므로, 둘을 함께 씁니다.
특정도는 최소한만 올립니다
순서가 맞는데도 진다면 상대 선택자가 더 구체적인 것입니다. 이때 필요한 것은 이기는 최소한이지 최대한이 아닙니다.
선택자를 길게 늘이는 것은 이기기는 하지만 다음 사람에게 같은 문제를 물려줍니다. 그 사람은 더 긴 선택자를 써야 하고, 스타일시트는 계속 무거워집니다. 클래스 하나를 더 붙이는 정도에서 멈추는 것이 대체로 최선입니다.
반대 방향의 도구도 있습니다. 기본값을 깔 때 :where() 안에 선택자를 넣으면 특정도가 0으로 계산되어, 나중에 아주 단순한 규칙으로도 덮어쓸 수 있습니다. 우리가 만드는 기본 스타일 층에 쓰면 다음 사람이 싸우지 않아도 됩니다.
그래도 !important 를 쓸 때
드물게 정당한 경우가 있습니다. 플러그인이 요소에 인라인 스타일을 직접 넣어 CSS 로는 도달할 수 없는 경우입니다. 이때는 !important 가 유일한 수단이므로 씁니다 — 다만 그 줄 위에 왜 필요한지 주석 한 줄을 남깁니다. 이유가 적힌 !important 는 나중에 걷어낼 수 있지만, 이유 없는 것은 아무도 손대지 못합니다.
스타일 계층을 설계하는 관점의 글은 테마 · 플러그인 아카이브에 있고, 이미 !important 로 뒤덮인 스타일시트를 정리하는 작업은 최적화 지원 사업의 리팩터링 범위에 들어갑니다.
다음 회차
여기까지 오면 커스터마이즈가 자식 테마 안에 정리돼 있습니다. 다음 회차는 그 상태에서 테마 업데이트를 안전하게 받는 방법 — 무엇이 깨질 수 있는지 미리 아는 목록입니다.