우선순위 표를 외웠는지가 아니라, 캐스케이드 규칙과 명시도가 어떻게 맞물려 동작하고 그게 실 코드에서 왜 잘 무너지는지 같이 보는지 가르려는 질문이다.
CSS 명시도는 같은 요소에 여러 규칙이 걸렸을 때 어떤 선언이 이길지 정하는 점수 체계다. 인라인 스타일이 가장 높고, 그다음으로 id 선택자, 그다음으로 클래스·속성·가상클래스, 마지막으로 요소·가상요소 선택자 순으로 점수가 쌓여 합산된다. 점수가 같으면 캐스케이드 규칙에 따라 더 나중에 선언된 쪽이 이기고, !important는 이 점수 체계를 한 단계 위로 끌어올린다. 그래서 명시도가 한번 어긋나기 시작하면 다른 규칙도 점점 강한 선택자나 !important로 따라가게 돼, 구조적으로는 선택자 설계와 @layer·:where() 같은 평탄화 도구로 우선순위 흐름을 미리 잡아 두는 쪽이 본 작업이 된다.
명시도가 꼬여 스타일이 안 먹던 자리를 선택자 구조 재설계로 풀어 본 경험이 있다면 구조적 해결 사례로 연결할 수 있다
`!important`를 줄이는 정리 작업을 진행해 본 적이 있다면 명시도 부채를 줄이는 관점으로 말할 수 있다
`@layer`·`:where()`로 우선순위를 평탄화해 본 경험이 있다면 평탄화 도구 도입 효과로 엮을 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.