{"id":"l-css-1-1","courseId":"css-mastery","lang":"ar","kind":"intro","summary":"اشرح الترتيب الذي يحسم به المتصفّح التصريحات المتنافسة، لتتوقّع القاعدة الفائزة قبل أن تفتح DevTools.","html":"

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

\n

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

\n

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

\n

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

\n

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

\n
HTML
<article class=\"session\" id=\"keynote\">\n  <h2 class=\"session-title\">Keynote: The Platform Is the Framework</h2>\n</article>
\n
CSS
#keynote h2 { color: #6d28d9; }\n.session .session-title { color: #1f2937; }
\n

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

\n

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

\n

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

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

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

\n\n

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

\n

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

\n\n

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

\n","toc":[{"id":"sec-1","text":"الصفحة التي ستبنيها","level":2},{"id":"sec-2","text":"الـ cascade خطوة بخطوة","level":2},{"id":"sec-3","text":"حين لا يفوز أحد","level":2}],"takeaways":["يرتّب الـ cascade التصريحات المتنافسة حسب المصدر والأهمية، ثم الأنماط المضمّنة (inline)، ثم الـ layers، ثم الـ specificity، وبعد ذلك فقط حسب ترتيب الظهور في الكود.","ترتيب الظهور هو آخر وسيلة لكسر التعادل لا أوّلها، لذا فإن نقل القاعدة إلى أسفل الملف يصلح أخطاء أقل بكثير مما يتوقّعه الناس.","حين لا يستهدف أيّ تصريح خاصيةً ما، يلجأ المتصفّح إلى الوراثة في الخصائص الموروثة، وإلى القيمة الابتدائية في بقية الخصائص.","!important تعكس ترتيب المصادر: قاعدة المستخدم المهمّة تتغلّب على قاعدة المطوّر المهمّة."],"further":[{"title":"Introduction to the CSS cascade (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction"},{"title":"The cascade (web.dev Learn CSS)","url":"https://web.dev/learn/css/the-cascade"}],"quiz":[{"q":"

قاعدتان في ملف الأنماط نفسه تستهدفان العنصر <h2 class="session-title"> نفسه. أيّ لون سيأخذ؟

\n
CSS
.session-title { color: teal; }\nh2 { color: crimson; }
\n","options":[{"text":"crimson، لأنها تأتي لاحقًا في الملف.","why":"ترتيب الظهور يكسر التعادل فقط بين تصريحات لها الـ specificity نفسها. والـ class يتغلّب على selector النوع قبل أن يُنظر إلى الترتيب أصلًا."},{"text":"teal، لأن selector الـ class أدقّ تحديدًا من selector النوع.","why":"صحيح. الـ specificity (0,1,0) تتغلّب على (0,0,1)، والـ specificity تُفحص قبل ترتيب الظهور."},{"text":"أيًّا كان اللون الذي يحدّده ملف الأنماط الافتراضي في المتصفّح لـ h2.","why":"ملف أنماط المتصفّح (user-agent) مصدر أقل أولوية من أنماطك أنت، لذا لا تتغلّب تصريحاته العادية أبدًا على قاعدة كتبتها."}],"answer":1},{"q":"

فقرة داخل .card ليس لها قاعدة color خاصة بها، و.card تضبط color: navy. ما اللون الذي تأخذه الفقرة؟

","options":[{"text":"القيمة الابتدائية لـ color، وهي عادةً الأسود.","why":"هذا ما يحدث في الخصائص غير الموروثة. أما color فخاصية موروثة، لذا تأخذ الفقرة القيمة المحسوبة لعنصرها الأب."},{"text":"لا شيء؛ تبقى الخاصية بلا قيمة حتى تستهدفها قاعدة ما.","why":"لكل عنصر قيمة لكل خاصية. وحين لا تستهدفها أيّ قاعدة، يملأها المتصفّح بالوراثة أو بالقيمة الابتدائية."},{"text":"navy، لأن color خاصية موروثة.","why":"صحيح. في غياب قيمة من الـ cascade، تنسخ الخصائص الموروثة القيمة المحسوبة للعنصر الأب."}],"answer":2},{"q":"

ما الخطوة التي يفحصها المتصفّح أولًا حين يتنافس تصريحان؟

","options":[{"text":"المصدر والأهمية.","why":"صحيح. كون التصريح من المتصفّح أو من المستخدم أو منك، وكونه !important أو لا، يُحسم قبل الـ layers والـ specificity."},{"text":"الـ specificity.","why":"الـ specificity لا تقارن إلا تصريحات متعادلة أصلًا في المصدر والأهمية والنمط المضمّن والـ layer."},{"text":"ترتيب الظهور.","why":"الترتيب هو آخر ما يكسر التعادل، ولا يُستخدم إلا حين يتساوى كل شيء آخر."},{"text":"طبقات الـ cascade.","why":"الـ layers تأتي بعد المصدر والأهمية والأنماط المضمّنة في عملية الترتيب."}],"answer":0}],"exercise":null,"words":604,"readMinutes":4}