CSS의 !important 규칙은 캐스케이드(cascade) 우선순위와 상관없이 특정 스타일 선언을 강제로 최우선 적용시키는 방법입니다. !important가 지정된 속성은 그 규칙이 스타일 시트의 어느 위치에 있든, 다른 어떤 선언보다도 항상 우선하여 적용됩니다.
기본 동작 예시
먼저 일반적인 경우를 살펴보겠습니다. 아래 스타일 시트에서는 같은 선택자 p에 대해 두 번 선언했는데, 이 경우 CSS 캐스케이드 규칙에 따라 나중에 선언된 값이 적용됩니다. 즉, 첫 번째 선언이 빨간색(#ff0000)이라 하더라도 실제로 표시되는 단락 텍스트는 검정색(#000000)입니다.
<style>
<!--
p {
color: #ff0000;
}
p {
color: #000000;
}
-->
</style>!important를 사용한 강제 적용
만약 특정 속성이 항상 적용되도록 보장하고 싶다면, 해당 속성 값 뒤에 !important를 붙여주면 됩니다. 아래 예제처럼 작성하면 선언 순서와 관계없이 단락 텍스트는 항상 빨간색으로 표시됩니다.
<html>
<head>
<style>
p {
color: #ff0000 !important;
}
p {
color: #000000;
}
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>실행 결과
위 코드를 실행하면 두 번째 규칙에서 검정색을 지정했음에도 불구하고, !important가 붙은 빨간색 선언이 우선 적용되어 화면에는 빨간색 텍스트가 출력됩니다.
!important 사용 시 주의사항
!important는 편리하지만 남용하면 안 되는 기능입니다. 자주 사용할수록 스타일 우선순위 구조가 꼬이게 되고, 나중에 스타일을 수정하거나 디버깅하기가 매우 어려워집니다. 또한 여러 곳에서 !important가 충돌하면 결국 코드가 복잡해지고 유지보수 비용이 커집니다.
따라서 !important는 다음과 같은 예외적인 상황에서만 사용하는 것이 좋습니다.
- 외부 위젯이나 서드파티 라이브러리의 스타일을 덮어써야 할 때
- 접근성을 위해 사용자 에이전트 스타일을 반드시 재정의해야 할 때
- 긴급한 버그 수정 등 임시방편이 필요할 때
가능하면 선택자의 명시도(specificity)를 조정하거나 스타일 선언 순서를 정리하는 방식으로 문제를 해결하고, !important는 최후의 수단으로만 활용하는 것이 바람직합니다.