التتالي والخصوصية والوراثة

تعلّم كيف تتوقّع أيّ قاعدة CSS ستفوز باستخدام الخصوصية، واستفد من الوراثة لكتابة قدر أقل من الشيفرة.

8 دقيقة · 3 أسئلة

تكتب قاعدة، وتعيد تحميل الصفحة… ولا يتغيّر شيء. في أغلب الأحيان لا يكون السبب خللاً برمجياً: إنه التتالي. عندما تستهدف عدة قواعد العنصر نفسه، يفصل المتصفّح في التعادل بهذا الترتيب: أصل القاعدة (أنماط المتصفّح، ثم أنماطك)، ثم خصوصية المُحدِّد، وأخيراً ترتيب الظهور في الشيفرة. إتقان هذه الآلية سيوفّر عليك ساعات من التنقيح.

p {
  color: gray;
}

.article p {
  color: navy;
}

تُحسب الخصوصية على شكل درجة من ثلاثة أجزاء: (المعرّفات، الأصناف، العناصر). فـ #menu درجته 1-0-0، و.nav-link درجته 0-1-0، وa درجته 0-0-1. تقارن من اليسار إلى اليمين: #menu (1-0-0) يتغلّب على .nav .link .active (0-3-0) حتى مع ثلاثة أصناف. تمرين ذهني: أيّهما يفوز بين header nav a (0-0-3) و.main-link (0-1-0)؟ الصنف، لأن الصنف يرجح على أيّ عدد من العناصر.

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

الوراثة حليفك لكتابة قدر أقل من الشيفرة: فالخصائص المتعلّقة بالنص (color، font-family، font-size، line-height) تُمرَّر تلقائياً إلى العناصر المنحدرة. أما خصائص الصندوق (margin، padding، border، width) فلا تُورَّث - ولحسن الحظ، وإلا لتلقّى كل عنصر ابن حدود أبيه. لذا عرّف طباعتك مرة واحدة، عند أعلى مستوى.

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. قاعدتان تستهدفان الفقرة نفسها: #intro { color: red; } ثم .text { color: blue; }. أيّ لون يُطبَّق؟
   • الأزرق، لأن الصنف مصرَّح به أخيراً
   • الأحمر، لأن المعرّف أكثر خصوصية من الصنف
   • لا هذا ولا ذاك، فالمتصفّح يبلّغ عن تعارض
2. أيّ من هذه الخصائص يرثه العناصر المنحدرة افتراضياً؟
   • margin
   • color
   • border
   • padding
3. لمُحدِّدَين الخصوصية نفسها تماماً، وهما يستهدفان العنصر نفسه. أيّ قاعدة تفوز؟
   • القاعدة المكتوبة أخيراً في ورقة الأنماط
   • القاعدة المكتوبة أولاً
   • القاعدة ذات المُحدِّد الأقصر