1. 개요
CSS 명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이것을 바탕으로 요소에 스타일을 적용한다.
명시도는 여러 종류의 CSS 선택자로 구성된 일종의 규칙을 따른다.
2. 명시도와 선택자
명시도는 가중치를 이용하여 계산하는데, 각 선택자 유형의 수에 의해 결정된다.
명시도가 같은 경우 가장 마지막에 한 선언이 요소에 적용된다.
부모로부터 상속받는 규칙보다 항상 우선된다.
DOM 트리 내 요소의 근접도는 명시도에 영향이 없다.
아래 선택자는 유형별로 명시도를 증가시킨다.
유형 선택자(h1 등) 및 의사 요소(:before 등).
클래스 선택자(.example 등), 속성 선택자([type="radio"] 등), 의사 클래스(:hover 등)
ID 선택자(#example 등)
전역 선택자(*), 조합자(+, >, ~, " ", ||), 부정 의사 클래스(:not())은 명시도에 영향을 주지 않는다.
*단, :not() 내부에 선언한 선택자는 영향을 끼친다.
3. !important 예외
이 규칙이 스타일 선언에 사용된 경우 이 선언은 다른 선언보다 우선된다.
강력한 기능이지만, 그만큼 디버깅을 어렵게 만들 수 있기에 웬만하면 사용을 지양한다.
!important를 사용할 때 고려해야 할 몇 가지 상황이 있다.
항상 !important를 고려하기 전에 다른 명시도를 활용할 방법을 찾기
외부 CSS(bootstrap 같은 거)를 재정의하는 페이지 전용 CSS에만 사용
재사용 가능한 컴포넌트나 플러그인을 작성할 때는 절대 쓰지 않기
사이트 전반에 사용되는 기본 스타일시트 CSS에는 절대 쓰지 않기
대신 다음 사항을 더 권장한다.
CSS 종속 Cascading을 더 잘 활용하기(=더 뒤에 선언하기)
더 명시적인 규칙 사용하기(=점수 높은 명시도를 활용하기)
특수한 경우로, 더 명시적인 규칙 사용이 곤란하면 간단한 선택자를 여러 번 쓰기(=점수 높은 명시도 여러 개 쓰기)
*3번보다는 사실 새로운 클래스를 추가하는 게 더 권장된다.
4. 명시도 계산법
선택자의 유형에 따라 명시도의 가중치가 다르다.
가중치를 0-0-0으로 두고 계산하면(좌측으로 갈수록 명시도가 높음),
유형 선택자, 의사 요소는 0-0-1
클래스 선택자, 속성 선택자, 의사 요소는 0-1-0
ID 선택자는 1-0-0
html 인라인 스타일(style="font-weight:bold" 이런 거)은 1-0-0-0으로 예외적인 강함
!important는 1-0-0-0-0으로 극히 예외적인 강함
5. CSS Cascading(종속)
하나의 요소에 여러 스타일 지시가 동시에 들어올 수 있는데 최종적으로 어떤 스타일을 적용할지 결정하는 규칙을 말한다.
이는 다음 단계에 따라 결정된다.
중요도: !important 사용 여부
출처: 작성자(개발자) 스타일시트 > 사용자(유저) 스타일시트 > 브라우저 기본 스타일
명시도: 선택자의 구체성(명시도 계산법 참조)
순서: 가장 나중에 선언된 규칙 > 먼저 선언된 규칙
중요도 -> 출처 -> 명시도 -> 순서의 순서대로 우선순위를 따져 스타일을 적용한다.
6. 형태 기반 명시도, 상속된 명시도
명시도는 선택자의 형태를 기반으로 한다.
*#foo {...} /* 이 규칙이 우선된다. */
*[id="foo"] {...} /* 명시도 계산법에서 속성 선택자로 취급되어 밀려난다. */또, 직접 일치하는 스타일은 상속된 규칙의 명시도보다 반드시 우선된다.