명시도(Css cascading 결정하는 요소)

명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

 

주의: 문서 트리 내 요소의 근접도(proximity, 가까움)는 명시도에 영향이 없습니다.

 

inline > 아이디(#) > 클래스(.) > 요소(element)

숫자로 명시도를 계산할 수 있다. (0 0 0 0)

선택자 유형

아래 선택자는 유형별로 명시도를 증가시킵니다.

1. 유형 선택자(h1 등) 및 의사 요소(:before 등).
2. 클래스 선택자(.example 등), 속성 선택자([type="radio"] 등), 의사 클래스(:hover 등).
3. ID 선택자(#example 등).

전역 선택자(*), 조합자(+, >, ~, ' ', ||) 및 부정 의사 클래스(:not())는 명시도에 영향을 주지 않습니다. (:not() 내부에 선언한 선택자는 영향을 끼칩니다)

https://specifishity.com에서 자세한 정보를 확인할 수 있습니다.

요소에 추가한 인라인 스타일(style="font-weight: bold"처럼)은 항상 외부 스타일시트의 모든 스타일을 덮어쓰므로 가장 높은 명시도를 갖는 것으로 생각할 수 있습니다.

 

!important 예외

!important 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다. 엄밀히 말해 !important 자체는 명시도와 아무 관련이 없지만, 명시도에 직접 영향을 미칩니다. 그러나 !important 사용은 나쁜 습관이고 스타일시트 내 자연스러운 종속을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. !important 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.

 

몇몇 경험 법칙들:

• 항상 !important를 고려하기도 전에 명시도를 활용할 방법을 찾아보세요.
• 외부 CSS(Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에만 !important를 쓰세요.
• 플러그인/매시업을 작성할 때 !important는 절대 쓰지 마세요.
• 사이트 전반 CSS에는 !important를 절대 쓰지 마세요.

!important를 사용하는 대신에, 다음을 고려하세요:

1. CSS 종속cascading을 더 잘 활용하세요.

2. 더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다: