!Important, CSS 규칙에 대해 ...

"큰 힘이 있는 곳에 큰 책임이 있다"- 윈스턴 처칠(1906)

스타일시트를 디버깅할 때 개발자는 이(!중요한 값) 기능을 오용하는 경향이 있습니다. 이는 게으름, 불만 또는 기한 등과 같은 여러 가지 이유 때문일 수 있으며 특정성의 규칙을 잊어버렸습니다.

특이성의 규칙

특이성 규칙은 계층 구조를 따릅니다. 선택기의 특이성 수준을 정의하는 네 가지 범주가 있습니다.

인라인 스타일 - 예: <h1 style="color: pink;">

ID - 예: #navbar

클래스, 의사 클래스, 속성 선택자 - 예: . test, :hover, [href]

요소 및 의사 요소 - 예: h1, :before

!important 규칙의 가능한 사용 사례

1. !important 규칙은 사용자가 브라우저의 도움으로 빠른 편집을 수행하여 사용자의 요구에 맞게 스타일 시트를 수정할 수 있는 사용자 지정 사용자 스타일 시트와 같은 경우에 매우 유용합니다.
2. Javascript 구문에서 !important의 사용.

!important를 사용하면 안 되는 이유

1. 코드 손상,
2. 디버깅을 어렵게 만들고
3. 특히 대규모 프로젝트에서 시간 소모적입니다.

최후의 수단으로만 사용하거나 전혀 사용하지 않는 것이 좋습니다.

!important를 재정의하는 방법

Mozilla 개발자 문서( https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity )에서 선별한 대로 다음을 통해 재정의할 수 있습니다.

1. !important를 사용하여 다른 CSS 규칙을 추가하고 선택기에 더 높은 특이성을 부여하거나(선택기에 태그, ID 또는 클래스 추가) 기존 규칙보다 나중에 동일한 선택기를 사용하는 CSS 규칙을 추가합니다. 이는 특이성 연결에서 정의된 마지막 규칙이 승리하기 때문에 작동합니다.

table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

특이성 규칙으로 인해 #myTable td가 실행됩니다.

2. 코드를 리팩토링하고 소스 코드에서 !important의 모든 사용을 제거합니다.

이것이 도움이 되길 바랍니다 😉.
내 게시물을 좋아하는 것을 잊지 마세요 😁💗 피드백이나 질문이 있으면 주저하지 말고 아래에 댓글을 달아주세요.