css에서 '!important' 사용 중지 - 가능한 가장 짧은 방법으로 설명된 css 특이성

대부분의 경우 개발자가 필요 없이 CSS에서 !important를 사용하는 것을 보았습니다. 단순한 재정의를 위해 !important를 사용하는 것은 항상 나쁜 습관입니다. 이는 스타일시트에서 자연스러운 캐스케이딩을 끊음으로써 디버깅을 더 어렵게 만들기 때문입니다.

"그럼 어떻게 피할 수 있습니까?"
대답은 더 큰 "특이성"을 사용하여 할 수 있다는 것입니다.

다음 몇 분 동안 가능한 가장 짧은 방법으로 CSS 특이성을 설명할 것입니다.

CSS 특이성은 브라우저가 특정 선택자에 얼마나 많은 우선 순위를 부여해야 하는지 이해할 수 있도록 각 선택자에 제공되는 값입니다.
다음은 우선 순위가 내림차순으로 된 선택기 유형입니다. 가장 높은 우선 순위를 가진 상위 항목과 가장 낮은 우선 순위를 가진 하위 항목입니다.

!important - 인라인 스타일( style 속성)을 포함하여 다른 모든 항목을 재정의하여 가장 높은 우선 순위가 부여됩니다. 동일한 요소에 대해 언급된 !important가 있는 CSS 선택자가 여러 개 있는 경우 CSS에서 찾은 마지막 선언이 요소에 적용됩니다.

h1 {
  color: blue !important
}

Inline styles

<h1 style="color: red">Hello reader</h1>

ID Selector

#headline {
  color: green
}

Class, pseudo class and attribute selector

// class selector
.headline {
  color: red
}

// pseudo class selector
h1:hover {
  color: red
}

// attribute selector
[type="input"] {
  color: red
}

Type Selectors and pseudo elements

// type selector
h1 {
  color: red
}

// pseudo element selector
h1:before {
  color: red
}

위의 종류의 선택자 외에 Universal 선택자* , 연결자+ , > , ~ , ' ' , || 및 특이성 값이 없는 부정 의사 클래스:not()가 있습니다. .

이제 브라우저가 특이성 값을 계산하는 방법과 이들이 결합될 때 어떤 일이 발생하는지 알아야 합니다. 주어진 선택기 조합의 총 값은 존재하는 선택기의 우선 순위와 해당 선택기의 발생 횟수로 계산됩니다. 아래 이미지에서 시각화할 수 있습니다.








여기에는 2개의 요소body 및 div와 2개의 클래스parentClass 및 ChildClass가 있습니다. 그렇기 때문에 발생 횟수가 우선 순위와 함께 추가되기 때문에 각 선택자 위치에서 2를 얻습니다.

더 많은 예는 this에서 확인할 수 있습니다.
자세한 내용은 this을 참조하십시오.

여기에 도달했다면 !important를 피하고 대신 더 높은 특이성을 사용할 수 있기를 바랍니다.
감사합니다, 행복한 스타일링!