ویژگی !important
ویژگی «!important» یعنی «این مقدار از همه مهم تر است». وقتی تعارض داریم، این قانون همان ویژگی را برنده می کند. اما دقت کن؛ استفاده زیاد، نگه داری را سخت می کند.
قانون !important چیست؟
!important در انتهای اعلان CSS می آید. همین، اولویت را حداکثر می کند. بنابراین حتی از سبک های قوی تر هم جلو می زند.
<style>
.box {
color: red !important;
}
</style>
نمونه: غلبه بر inline, id, class
اینجا پس زمینه هر سه پاراگراف زرد می شود. چون !important جلوتر است.
<html>
<head>
<style>
p {
background-color: yellow !important;
}
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
</style>
</head>
<body>
<p style="background-color: orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
با احتیاط استفاده کن
!important را فقط وقتی اجبار داری بزن. چون رفع باگ سخت می شود. اگر چند !important داشته باشی، تازه تداخل ها پیچیده تر می شوند.
<style>
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
</style>
کاربرد منصفانه: احترام به تنظیم کاربر
اگر کاربر «کاهش حرکت» را خواسته، انیمیشن ها را خاموش کن. این کار با media query و !important انجام می شود.
<style>
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
کاربرد منصفانه: یک دکمه یکنواخت
گاهی می خواهی ظاهر دکمه ها همیشه ثابت بماند. در این حالت، می توانی ویژگی های کلیدی را با !important قفل کنی.
<style>
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
<a class="border button" href="#">Link Button</a>
<div id="myDiv">
<a class="button" href="#">Inside Div</a>
</div>
گام های عملی
- اول اختصاصی سازی را بررسی کن.
- قانون های اضافی را پاک کن.
- اگر مجبور شدی، !important بزن.
- بعداً دوباره ساده سازی کن.
نکته: پیش از !important، به اختصاصی سازی فکر کن. شاید نیاز نباشد.
جمع بندی سریع
- ویژگی !important آخرین تیر است.
- استفاده زیاد، دیباگ را سخت می کند.
- با media query عالی می شود.
- اول قوانین را تمیز کن.
بیشتر بخوان: صفحه ویژگی !important، و مرجع اختصاصی سازی. برای اندازه گیری بهتر، صفحه واحدها هم مفید است.