CSS - Specificity الأولوية

CSS - الأولوية (Specificity)

🔸 عندما تنطبق أكثر من قاعدة CSS على نفس العنصر، يتم تحديد أي قاعدة يتم تطبيقها حسب مبدأ الأولوية (Specificity)، وليس فقط حسب الترتيب.

---

🔹 ما هي Specificity؟

هي نظام نقاط يُستخدم لتحديد أي قاعدة CSS تُطبق في حال تعارض عدة قواعد. كل نوع من أنواع المحددات (selectors) له وزن معين:

• Inline style (مثل style=""): 1000 نقطة
• المعرف (ID): 100 نقطة
• الكلاس أو الـ attributes أو pseudo-classes: 10 نقاط
• العناصر (element) أو pseudo-elements: 1 نقطة

---

🔹 مثال توضيحي

/* specificity = 1 */
p {
  color: red;
}

/* specificity = 10 */
.intro {
  color: blue;
}

/* specificity = 100 */
#main {
  color: green;
}

<p id="main" class="intro">هذا النص سيكون لونه أخضر</p>

✅ يتم تطبيق اللون الأخضر لأنه يأتي من معرف (ID) وقيمته أعلى من الكلاس والعنصر.

---

🔹 inline style تتفوق على الكل

<p id="main" class="intro" style="color: orange;">
  سيتم تطبيق اللون البرتقالي
</p>

✅ لأن style داخل العنصر نفسه له أعلى أولوية (1000 نقطة).

---

🔹 !important تتفوق على الجميع

p {
  color: red !important;
}

📌 يتم تطبيق هذا النمط حتى لو كان هناك inline style أو معرف، لأن !important له أولوية قصوى.

---

📌 ملاحظات مهمة

• اكتب CSS منظم لتقليل الحاجة لـ !important.
• تجنب الإفراط في التحديد (Over-Specification)، لأنه يصعب عليك التعديل لاحقًا.
• يمكنك استخدام أدوات لحساب specificity مثل: specificity.keegan.st