كيف يختار المتصفّح القاعدة الفائزة

كل خطأ في CSS يجعلك تقول «لكنني كتبت هذه القاعدة!» له السبب الجذري نفسه: أكثر من تصريح (declaration) أراد الخاصية نفسها على العنصر نفسه، فاختار المتصفّح غير الذي اخترته أنت. المتصفّح لا يتصرّف عشوائيًا؛ إنه ينفّذ خوارزمية ترتيب ثابتة اسمها الـ cascade (التتالي)، وحين تستطيع تشغيلها في رأسك تتوقّف CSS عن أن تبدو لعبة «اضرب الخُلد» التي لا تنتهي.

هذه الدورة تعلّمك CSS من جهة المتصفّح. ستتعلّم ما تفعله كل ميزة حديثة، وستتعلّم أيضًا لماذا يتصرّف المتصفّح بهذه الطريقة، لأن هذا بالضبط ما يتيح لك توقّع النتيجة قبل أن تعيد تحميل الصفحة.

الصفحة التي ستبنيها

على طول الدورة ستحسّن صفحة حقيقية واحدة: جدول Waypoint Conf 2026، وهو مؤتمر للواجهات الأمامية يمتد يومين. فيها رأس صفحة ثابت (sticky)، وشريط فلاتر بمربّعات اختيار للمسارات، وبطاقات للجلسات (الوقت والعنوان والمتحدّث والقاعة وشارة المسار)، وشبكة للمتحدّثين بصورهم، ووضع داكن. تبدأ الصفحة بـ CSS بسيطة ومكسورة قليلًا، وفي النهاية تستخدم الـ layers والـ container queries وألوان oklch() والـ view transitions ومعمارية يستطيع فريق من خمسة أشخاص أن يتشاركها.

هذا أول تعارض ستقابله فيها:

<article class="session" id="keynote">
  <h2 class="session-title">Keynote: The Platform Is the Framework</h2>
</article>

#keynote h2 { color: #6d28d9; }
.session .session-title { color: #1f2937; }

القاعدة الثانية تأتي لاحقًا، لذا يتوقّع كثيرون أن يكون العنوان رماديًا داكنًا. لكنه بنفسجي. ولتفهم السبب تحتاج إلى معرفة ترتيب الفرز.

الـ cascade خطوة بخطوة

حين تستهدف عدّة تصريحات الخاصية نفسها على العنصر نفسه، يرتّبها المتصفّح وفق المعايير التالية بالترتيب، ويتوقّف عند أول معيار يفرّق بينها:

1. المصدر والأهمية. تأتي التصريحات من ملف الأنماط الافتراضي في المتصفّح (user-agent)، أو من المستخدم (إعدادات إمكانية الوصول والإضافات)، أو منك أنت (author). قواعدك العادية تتغلّب على افتراضيات المتصفّح. و!important تقلب الترتيب، فتتغلّب قاعدة المستخدم المهمّة على قاعدتك. وهذا مقصود: من يحتاج إلى نص كبير يجب أن يستطيع تجاوز تصميمك.
2. الأنماط المضمّنة. السمة style="…" على العنصر تتغلّب على أيّ selector في ملف الأنماط. (في المواصفة خطوة أخرى قبل هذه مباشرةً تخصّ عزل الـ Shadow DOM، ولا تهمّك إلا حين تبني web components.)
3. طبقات الـ cascade. القواعد في الـ @layer المُعلَنة لاحقًا تتغلّب على القواعد في الطبقات الأسبق، بغضّ النظر عن الـ specificity. ستستخدم هذا في درس طبقات الـ Cascade باستخدام @layer.
4. الـ Specificity (درجة التحديد). مدى دقّة الـ selector في استهداف العنصر. الـ IDs تتغلّب على الـ classes، والـ classes تتغلّب على أنواع العناصر.
5. ترتيب الظهور. إن تعادل كل ما سبق، يفوز التصريح الذي يظهر أخيرًا.

لنعد إلى الـ keynote: كلتا القاعدتين من أنماطك العادية، ولا إحداهما مضمّنة، ولا إحداهما داخل layer. إذن الخطوة 4 هي التي تحسم. #keynote h2 يحتوي على ID، و.session .session-title لا يحتوي إلا على classes، وID واحد يتفوّق على أيّ عدد من الـ classes. البنفسجي يفوز، والترتيب لا يُستشار أصلًا.

حين لا يفوز أحد

أحيانًا لا يستهدف أيّ تصريح خاصيةً ما على الإطلاق. لكن المتصفّح يحتاج إلى قيمة رغم ذلك، فيلجأ إلى الافتراضي: الخصائص الموروثة مثل color وfont-family وline-height تنسخ قيمة العنصر الأب، والخصائص غير الموروثة مثل border وpadding وbackground-color تأخذ قيمتها الابتدائية. لهذا فإن ضبط font-family على body ينسّق الصفحة كلها، بينما ضبط padding على body يضيف حشوة إلى الـ body وحده.

الدرس التالي يفكّك الخطوة 4: كيف تُحسب الـ specificity، ولماذا يستطيع ID واحد أن يخرّب مكتبة components كاملة، وكيف يتيح لك :is() و:where() أن تختار بدقّة الوزن الذي يحمله الـ selector.