آموزش دستور important! در CSS

دستور important! در CSS چیست؟

از دستور important! در CSS برای دادن اهمیت و اولویت بیشتر به یک ویژگی و مقدار، نسبت به حالت عادی استفاده می شود. در حقیقت، اگر ما از دستور important! استفاده کنیم، این دستور، روی تمام استایل های دیگری که برای یک عنصر خاص اعمال شده اند رونویسی می شود و اهمیت و اولویت بیشتری برای اجرا (روی آن عنصر) پیدا می کند. به مثال زیر توجه کنید:

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

 توضیح مثال بالا

در مثال بالا، هر سه پاراگراف، یک رنگ پس زمینه ی قرمز(red) را دریافت می کنند، با اینکه سلکتور id و سلکتور class از اولویت(specificity) بیشتری برخوردار هستند. دستور important! باعث می شود ویژگی background-color و مقدار red روی دیگر ویژگی ها و مقدارها رونویسی شود.

 نکاتی مهم درباره ی دستور important!

تنها راه برای رونویسی(override) کردن  یک دستور important! این است که از یک دستور important! دیگر روی یک اعلان(دستور CSS) با اولویت یکسان(یا بیشتر) در کدهای منبع استفاده کنیم. و اینجاست که مشکل آغاز می شود!. این کار باعث می شود کد CSS گیج شود و دیباگ کردن سخت شود؛ به خصوص اگر یک برگه ی استایل(style sheet) بزرگ داشته باشیم. در اینجا، ما یک مثال ساده ایجاد کرده ایم. در این مثال خیلی واضح نیست که وقتی که ما به کدهای منبع CSS نگاهی می اندازیم، کدما رنگ از اهمیت(important) بیشتری برخوردار است:

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

نکته: این خوبه  که در مورد دستور important! اطلاعات بیشتری کسب کنیم. و این دستور رو در برخی کدهای منبع CSS خواهیم دید. اما تا زمانی که مجبور نشوید، از آن استفاده نکنید.

یک یا دو استفاده ی منصفانه از دستور important!

یک راه برای استفاده از دستور important! این است: موقعی که مجبوریم یک استایل را رونویسی کنیم، که به هیچ طریق دیگری نمی توانیم آن را رونویسی کنیم. مثلاً وقتی داریم با یک سیستم مدیریت محتوا(CMS) کار می کنیم و نمی توانیم کد CSS را ویرایش کنیم. در این زمان می توانیم با استفاده از مقداری استایل شخصی، کدهای CSS خود را روی استایل های CMS رونویسی کنیم.

یک راه دیگر برای استفاده از دستور important! این است: فرض کنید می خواهیم برای تمام دکمه های درون یک صفحه، ظاهر خاصی را تنظیم کنیم. مثلاً در مثال زیر، دکمه ها از یک رنگ پس زمینه ی خاکستری(gray)، و متنی سفید(white) و مقداری padding و کادر(border) استفاده می کنند:

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

ظاهر یک دکمه، اگر آن را در داخل یک عنصر دیگر  با اولویت(specificity) بیشتر قرار دهیم، گاهی اوقات می تواند تغییر کند و ویژگی های(properties) آن دچار تضاد(conflict) می شوند. به مثال زیر توجه کنید:

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

 برای اینکه همه ی دکمه ها را مجبور کنیم که به صورت یکسان به نظر برسند، می توانیم از دستور important! برای ویژگی دکمه ها استفاده کنیم، مانند زیر:

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}