الأولوية والوراثة والـ Cascade

لماذا هذا الدرس مهم جدًا؟

أكثر إحباط يواجه المبتدئ: "كتبتُ color: red لكنه لم يتغيّر!" السبب غالبًا الأولوية (Specificity). فهم هذا الدرس يحلّ 90% من مشاكل CSS الغامضة.

الـ Cascade (التتالي)

CSS اختصار لـ Cascading Style Sheets. عند تطبيق عدة قواعد على عنصر، يقرّر المتصفح الفائز بثلاثة معايير بالترتيب:

1. الأهمية (!important).
2. الأولوية (Specificity).
3. ترتيب الكتابة (الأخير يفوز عند التساوي).

الأولوية (Specificity)

كل محدّد له "وزن". الأعلى وزنًا يفوز. الترتيب من الأقوى للأضعف:

p { color: blue; }            /* وزن منخفض */
.text { color: green; }        /* أعلى — يفوز على p */
#main { color: red; }          /* أعلى — يفوز على .text */

<p id="main" class="text">ما لوني؟ أحمر (الـ id يفوز)</p>

🔑 عند تساوي الأولوية، تفوز القاعدة المكتوبة لاحقًا في الملف.

الوراثة (Inheritance)

بعض الخصائص تُورَّث من الأب للأبناء تلقائيًا (مثل color, font-family)، وبعضها لا (مثل border, margin):

body {
  color: #333;
  font-family: Cairo;   /* يرثها كل الأبناء */
}

لفرض الوراثة أو إلغائها:

.child {
  color: inherit;   /* خذ لون الأب */
  border: initial;  /* أعد للقيمة الافتراضية */
}

!important — السلاح الأخير ⚠️

يتجاوز كل الأولويات:

p { color: blue !important; }   /* يفوز حتى على #id */

⚠️ تجنّبه قدر الإمكان! يكسر التتالي الطبيعي ويصعّب الصيانة. استخدمه فقط كحلٍّ أخير.

الأخطاء الشائعة

• ❌ الإفراط في #id للتنسيق → أولوية عالية يصعب تجاوزها لاحقًا؛ فضّل .class.
• ❌ الإكثار من !important → فوضى لا يمكن إصلاحها إلا بمزيد منه.
• ❌ نسيان أن الترتيب يحسم التساوي → ضع القواعد العامة أولًا والخاصة لاحقًا.

خلاصة

عند التعارض يفوز: !important ← ثم الأولوية الأعلى (inline > id > class > element) ← ثم الأخير في الترتيب. افهم الوراثة، وقلّل من #id و!important. هذا الدرس مفتاح حلّ مشاكل CSS.