42- قاعدة !important في CSS

ما المقصود بقاعدة !important؟

قاعدة “!important” في CSS هي طريقة لإعطاء خاصية ما قيمة أعلى من قيمها المعتادة.

بمعنى آخر، إذا استخدمت قاعدة “!important” مع خاصية معينة، فإنها ستتجاوز جميع قواعد التنميط السابقة لهذه الخاصية على نفس العنصر.

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

شرح المثال

في المثال السابق، ستحصل جميع الفقرات الثلاث على لون خلفية أحمر، على الرغم من أن لكل من مُحدد الهوية (#intro) ومُحدد الصفة (.important) أولوية أعلى في حساب الخصوصية.

ملاحظات مهمة حول قاعدة !important

الطريقة الوحيدة لتجاوز قاعدة منشئة باستخدام “!important” هي تضمين قاعدة أخرى تستخدم “!important” أيضًا ولكن مع خصوصية أعلى (أو مساوية على الأقل) في نفس ملف CSS. وهذه هي المشكلة بالضبط!

استخدام “!important” بشكل متكرر يجعل أكواد CSS يصعب فهمها وصيانتها لاحقًا، خاصةً إذا كان لديك ملفات CSS كبيرة ومعقدة. يصعب تحديد القاعدة التي يتم تطبيقها فعليًا على العناصر في المستند عند وجود العديد من قواعد “!important”.

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

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

p {
  background-color: red !important;
}

نصيحة حول قاعدة !important

من الجيد أن تكون على دراية بقاعدة “!important” في CSS. قد تصادفها أحيانًا في أكواد CSS التي تتعامل معها.ومع ذلك، يُنصح بعدم استخدامها إلا في حالات الضرورة القصوى.

استخدامات قليلة ومقبولة لقاعدة !important

على الرغم من أنه من الأفضل تجنب استخدام قاعدة !important بشكل عام، إلا أن هناك بعض الحالات الاستثنائية المقبولة لاستخدامها:

1. تجاوز أنماط نظام إدارة المحتوى (CMS):

إذا كنت تعمل على موقع مبني على نظام إدارة محتوى (CMS) ولا تملك صلاحية تعديل ملفات CSS الأساسية للنظام، فقد تضطر إلى استخدام !important لتجاوز بعض الأنماط التي يفرضها النظام. على سبيل المثال، يمكنك استخدام قاعدة !important لتخصيص مظهر عناصر معينة دون الحاجة إلى تعديل أكواد النظام الأساسية.

2. تطبيق أنماط خاصة على عناصر محددة:

لنفرض أنك تريد تطبيق مظهر خاص على جميع أزرار الصفحة، بغض النظر عن أي أنماط أخرى قد تؤثر عليها. لنفترض أن الأزرار في الموقع حاليًا لها خلفية رمادية، نص أبيض، وحشو (padding) وحدود (border) معينة.

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

كيف يمكن لقاعدة !important أن تساعد في الحفاظ على مظهر زر خاص

كما ذكرنا سابقًا، يمكن أن يتأثر مظهر زر منشأ باستخدام قواعد !important إذا تم وضع هذا الزر داخل عنصر آخر له خصوصية أعلى.

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

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

فرض نفس المظهر على جميع الأزرار باستخدام !important

ل فرض نفس المظهر على جميع الأزرار بغض النظر عن أي تأثيرات أخرى، يمكنك إضافة قاعدة !important إلى خصائص الزر على النحو التالي:

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

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