자식 테마에서 스타일을 썼는데 화면이 바뀌지 않습니다. 검사 도구로 열어 보면 우리 규칙이 줄이 그어진 채 부모 규칙에 밀려 있습니다. 여기서 손이 !important 로 가는데, 그것은 원인이 아니라 증상을 덮는 선택입니다. 원인은 대개 하나입니다 — 자식 스타일시트가 부모보다 먼저 로드됐습니다.
같은 구체성이면 나중에 온 쪽이 이깁니다
CSS 는 선택자의 구체성이 같을 때 문서에 나중에 등장한 선언을 채택합니다. 부모 테마의 .site-header a 와 자식 테마의 .site-header a 는 구체성이 정확히 같으므로, 승부는 오직 로드 순서에서 납니다. 즉 순서를 고치면 강제 선언이 필요 없어지고, 반대로 순서를 두고 강제 선언으로 이기면 다음 규칙에서 같은 싸움을 다시 하게 됩니다.
강제 선언의 진짜 비용은 여기 있습니다. 하나를 쓰면 그것을 덮기 위해 다음 것도 써야 하고, 결국 파일 전체가 서로를 이기려는 선언으로 채워집니다. 그때는 “무엇이 적용되는가” 를 코드만 보고 판단할 수 없게 됩니다.
의존성 배열이 순서를 보장합니다
wp_enqueue_style() 의 세 번째 인자는 이 자산보다 먼저 나와야 하는 핸들의 목록입니다. 여기에 부모 핸들을 적으면 워드프레스가 순서를 계산해 주므로, 훅 우선순위를 어떻게 잡든 결과가 뒤집히지 않습니다.
<?php
add_action( 'wp_enqueue_scripts', function () {
$dist = '/assets/dist/main.css';
wp_enqueue_style(
'mytheme-main',
get_stylesheet_directory_uri() . $dist,
[ 'parent-style' ], // ← 순서를 보장하는 줄
(string) filemtime( get_stylesheet_directory() . $dist )
);
}, 120 );먼저 부모의 실제 핸들 이름을 알아야 합니다. 부모 테마의 enqueue 코드를 열어 보는 것이 가장 확실하고, 급하면 wp_styles()->queue 를 찍어 현재 화면의 핸들 목록을 그대로 볼 수 있습니다. 존재하지 않는 핸들을 의존성에 적으면 조용히 무시되어 아무 보장도 얻지 못하므로, 이름은 반드시 확인하고 적습니다.
디렉터리 함수 두 개를 혼동하지 않습니다
자식 테마에서 가장 자주 나오는 사고입니다. get_template_directory_uri() 는 부모 테마 경로를, get_stylesheet_directory_uri() 는 자식 테마 경로를 돌려줍니다. 자식 파일을 부모 함수로 부르면 404 가 나고, 스타일이 통째로 빠진 화면을 “CSS 우선순위 문제” 로 오해하게 됩니다.
버전 인자도 그냥 넘기지 않습니다. 파일 수정 시각(filemtime)을 버전으로 쓰면 파일이 바뀔 때만 주소가 바뀌므로, 브라우저 캐시가 알아서 갱신됩니다. 고정 문자열로 두면 배포 후에 “나만 옛 화면이 보이는” 상태가 생기고, 매번 손으로 숫자를 올리는 일을 잊게 됩니다.
확인하는 방법
페이지 소스에서 link 태그의 순서를 보면 끝입니다. 부모 스타일시트가 자식보다 위에 있으면 정상입니다. 스크립트도 같은 규칙이 적용되지만 한 가지가 더 있습니다 — 의존성으로 지정한 스크립트는 순서뿐 아니라 로드 위치(head/footer) 까지 함께 조정되므로, jQuery 에 의존하는 코드를 footer 로 내려도 안전합니다.
자산 크기와 첫 화면 렌더링의 관계는 성능 최적화 아카이브에서 더 다루고, 어떤 자산이 실제로 내려가고 있는지는 무료 도구의 진단으로 확인할 수 있습니다.
다음 회차
스타일이 붙었으니 이제 마크업 차례입니다. 화면이 늘어나면 같은 카드 · 같은 헤더를 두 파일에 복사하게 되는데, 그 사본은 반드시 어긋납니다. 다음 회차는 조각 나누기입니다.