Keynote: The Platform Is the Framework
\nRead the full abstract.
\n Save to my schedule\nبدأت صفحة جدول Waypoint حياتها نموذجًا أوليًا سريعًا، وملف أنماطها يشهد على ذلك. في مكان ما قرب أعلاه تقبع القاعدة #schedule article a { color: #1d4ed8; }، وفي كل مرة يضيف فريق التصميم رابطًا على هيئة زر داخل بطاقة جلسة، يتحوّل نص الزر إلى الأزرق. «أصلحه» أحدهم الشهر الماضي بـ !important، والآن لا أحد يستطيع تغيير ثيم الزر.
هذه مشكلة specificity، وحلّها ليس مطرقة أكبر، بل أن تختار الوزن الذي يجب أن يحمله كل selector.
\nيعطي المتصفّح كل selector درجة على شكل ثلاثية، تُكتب غالبًا (A, B, C):
\n| العمود | \nما يُحسب فيه | \nأمثلة | \n
|---|---|---|
| A | \nselectors الـ ID | \n#schedule | \n
| B | \nالـ classes والسمات (attributes) والـ pseudo-classes | \n.session، [type="checkbox"]، :hover | \n
| C | \nselectors الأنواع والـ pseudo-elements | \narticle، a، ::before | \n
الـ selector الشامل * والروابط بين الـ selectors (combinators: المسافة و> و+ و~) لا تضيف شيئًا. لتقارن selectorين، قارن العمود A؛ فإن تعادلا فقارن B؛ فإن تعادلا فقارن C. لا يوجد «حَمْل» من عمود إلى آخر: أحد عشر class (0,11,0) تخسر رغم ذلك أمام ID واحد (1,0,0). النصيحة القديمة «اجمع النقاط» (100 لكل ID و10 لكل class) تنهار هنا تحديدًا، فانسَها.
احسب درجات تعارض Waypoint:
\n#schedule article a { color: #1d4ed8; } /* (1, 0, 2) */\n.btn { color: #fff; } /* (0, 1, 0) */الـ ID في الـ selector الأول يفوز في العمود A، فيصبح نص الزر أزرق. ونقل .btn إلى أسفل الملف لا يغيّر شيئًا.
:is(): تجميع مع شرط خفيّتأخذ :is() قائمة selectors وتطابق إن طابق أيٌّ منها، فتوفّر عليك تكرار الـ selectors الطويلة:
/* Before */\n.session h2, .session h3, .session h4 { text-wrap: balance; }\n\n/* After */\n.session :is(h2, h3, h4) { text-wrap: balance; }الشرط الخفيّ هو قاعدة الـ specificity: تأخذ :is() الـ specificity الخاصة بـ أدقّ وسيط فيها، أيًّا كان الوسيط الذي طابق فعلًا. فالقاعدة :is(#featured, .session) h2 درجتها (1,0,1) على كل .session h2، حتى تلك التي لا يوجد قربها أيّ ID. و:not() و:has() تتبعان القاعدة نفسها.
وتستخدم :is() أيضًا قائمة selectors متسامحة. في القائمة العادية مثل .a, .b:unknown، يكفي selector واحد غير معروف لإبطال القاعدة كلها. أما داخل :is() فيُسقط المتصفّح الوسيط السيئ وحده ويحتفظ بالباقي.
:where(): الغلاف عديم الوزنتطابق :where() تمامًا كما تطابق :is()، مع فرق واحد: الـ specificity فيها صفر دائمًا، أيًّا كان ما بداخلها. وهذا يجعلها الأداة المناسبة لأيّ نمط يُقصد به أن يكون افتراضيًا:
/* Base link style: (0,0,1) because only the trailing `a` counts */\n:where(#schedule article) a {\n color: #1d4ed8;\n text-decoration: underline;\n}\n\n/* Component: (0,1,0) beats (0,0,1) */\n.btn {\n color: #fff;\n background: #6d28d9;\n text-decoration: none;\n}ما زالت القاعدة الأساسية تنطبق فقط داخل مقالات #schedule، أي أن نطاقها لم يتغيّر. الذي انخفض هو وزنها فقط. والآن يفوز أيّ component مبني على class بلا حيل.
وهذا افتراض مفيد لقاعدة كود كاملة: غلّف أنماط إعادة الضبط وافتراضيات العناصر بـ :where()، واكتب الـ components بـ class واحد، واجعل selectors الحالات (.btn:hover و.btn[aria-pressed="true"]) أثقل من الـ component بدرجة واحدة.
حين تخسر قاعدة ما، أمامك أربعة خيارات. هذه هي بالترتيب الذي ألجأ إليه:
\n:where(). هذا يعالج السبب، ويستفيد منه كل component في المستقبل..btn.btn يضيف (0,1,0) دون أن يغيّر ما يطابقه. إنها حيلة مشروعة ومحلية، لكن كل تكرار دَين سيدفعه التجاوز التالي.!important. احتفظ بها للـ utilities التي يجب أن تفوز دائمًا ولتجاوزات إمكانية الوصول. أما استخدامها لترقيع تعارض واحد فيبدأ سباق تسلّح، لأن الطريقة الوحيدة لهزيمتها هي !important أخرى.لن تضطر إلى العدّ يدويًا إلى الأبد. مرّر المؤشّر فوق أيّ selector في لوحة Styles في Chrome أو Firefox، وسيُظهر لك التلميح ثلاثية الـ specificity الخاصة به. استخدمه أسبوعًا لتتحقّق من حساباتك الذهنية، وبعدها نادرًا ما ستحتاج إليه.
\nيعطيك التمرين بطاقة جلسة Waypoint مع قاعدة الروابط من النموذج الأولي. خفّف وزن القاعدة الأساسية ليعود الزر زرًّا، بينما تحتفظ الروابط العادية بلونها الأزرق وخطّها السفلي. وستعالج هذا على نطاق أوسع في الدرس التالي، حيث تتيح لك طبقات الـ cascade أن تقرّر أيّ مجموعات الأنماط تفوز، قبل أن تُستشار الـ specificity أصلًا.
\n","toc":[{"id":"sec-1","text":"الـ specificity ثلاثة أعداد لا عدد واحد","level":2},{"id":"sec-2","text":":is(): تجميع مع شرط خفيّ","level":2},{"id":"sec-3","text":":where(): الغلاف عديم الوزن","level":2},{"id":"sec-4","text":"أربع طرق لكسب معركة specificity","level":2},{"id":"sec-5","text":"قراءة الـ specificity في DevTools","level":2},{"id":"sec-6","text":"دورك الآن","level":2}],"takeaways":["الـ specificity ثلاثة أعداد منفصلة (الـ IDs، ثم الـ classes والسمات والـ pseudo-classes، ثم الأنواع والـ pseudo-elements) تُقارَن عمودًا بعمود، ولا تُجمع أبدًا في رقم واحد.",":is() و:not() و:has() تأخذ specificity أدقّ وسيط فيها، حتى لو كان الوسيط الأقل دقّة هو الذي طابق العنصر.","الـ specificity في :where() صفر دائمًا، ما يجعلها الغلاف المناسب لأنماط إعادة الضبط (resets) والأنماط الأساسية التي يجب أن تخسر أمام أيّ component.",":is() و:where() تستخدمان قوائم selectors متسامحة: selector واحد غير صالح بداخلهما لا يُسقط القاعدة كلها."],"further":[{"title":"Specificity (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity"},{"title":":where() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:where"},{"title":":is() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:is"}],"quiz":[{"q":"ما الـ specificity الخاصة بـ nav#main a.active:hover؟
#main)؛ وclass واحد مع pseudo-class واحد (.active و:hover)؛ ونوعان (nav وa)."},{"text":"(1, 1, 2)","why":"الـ pseudo-classes مثل :hover تُحسب في العمود الأوسط مع الـ classes، فيكون فيه اثنان لا واحد."},{"text":"(1, 2, 1)","why":"كلٌّ من nav وa selector نوع، لذا فالعمود الأخير قيمته 2."},{"text":"(0, 3, 2)","why":"#main selector من نوع ID، ومكانه العمود الأول لا مع الـ classes."}],"answer":0},{"q":"ما اللون الذي يأخذه الرابط؟
\n:is(#sidebar, .card) a { color: red; }\n.card .card-link { color: blue; }<div class=\"card\"><a class=\"card-link\" href=\"#\">Read</a></div>.card لا عبر #sidebar.","why":":is() لا تهتم بالوسيط الذي طابق. إنها تأخذ دائمًا specificity أدقّ وسيط فيها، وهو هنا ID."},{"text":"red، لأن :is() تأخذ specificity الـ #sidebar.","why":"صحيح. القاعدة الأولى درجتها (1,0,1) فتتغلّب على (0,2,0)، مع أن العنصر لا يحمل أيّ ID أصلًا."},{"text":"blue، لأنها تأتي لاحقًا في ملف الأنماط.","why":"الترتيب لا يهم إلا عند تعادل الـ specificity، و(1,0,1) تتغلّب على (0,2,0) مباشرةً."}],"answer":1},{"q":"في ملف إعادة الضبط لديك ul[class] { list-style: none; margin: 0; }، والقاعدة .tags { margin-block: 1rem; } في أحد الـ components تخسر أمامها. ما أنظف إصلاح؟
!important إلى margin الـ component.","why":"هذا يكسب هذه المعركة لكنه يبدأ تصعيدًا؛ فالتجاوز التالي سيحتاج إلى !important أيضًا، وتفقد القدرة على بناء الثيمات."},{"text":"ارفع selector الـ component إلى ul.tags.tags.","why":"ينجح، لكن كل component سيضطر الآن إلى التفوّق على ملف إعادة الضبط، وهذا هو سباق التسلّح الذي تريد إنهاءه."},{"text":"أعد كتابة إعادة الضبط على شكل :where(ul[class]) { … }.","why":"صحيح. تنخفض specificity إعادة الضبط إلى صفر، فيتجاوزها أيّ selector بـ class في أيّ component."}],"answer":2},{"q":"كُتبت قاعدة بالشكل :is(.card, :future-state) h3 { … } والمتصفّح لا يتعرّف على :future-state. ماذا يحدث؟
:is() و:where() تستخدمان قوائم selectors متسامحة."},{"text":"تظل القاعدة تنطبق على .card h3؛ ويُتجاهل الـ selector المجهول وحده.","why":"صحيح. التحليل المتسامح يتخلّص من الوسيط غير الصالح ويحتفظ بالباقي."},{"text":"يُظهر Chrome خطأً في الـ console ويتوقّف عن تحليل ملف الأنماط.","why":"لا تتوقّف CSS أبدًا عن التحليل بسبب الأخطاء؛ إنها تتجاهل ما لا تفهمه وتكمل."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Read the full abstract.
\n Save to my schedule\nRead the full abstract.
\n Save to my schedule\nقاعدة النموذج الأولي #schedule article a تجعل زر Save to my schedule أزرق وتحته خط. عدّل قاعدة الروابط الأساسية وحدها بحيث يستعيد .btn نمطه الأبيض بلا خط سفلي، بينما يبقى الرابط العادي .abstract-link أزرق (#1d4ed8) وتحته خط. لا تعدّل قاعدة .btn، ولا تلمس الـ HTML، ولا تستخدم !important.
#schedule article a درجته (1,0,2) و.btn درجته (0,1,0). أيّ عمود يحسم المقارنة؟","تريد أن تبقى القاعدة الأساسية منطبقة داخل مقالات #schedule فقط، لكن بوزن أقل.","غلّف السياق بـ :where(): درجة :where(#schedule article) a { … } هي (0,0,1)."],"explanation":"تحتفظ :where() بنطاق الـ selector لكنها لا تضيف أيّ specificity، لذا تصبح درجة :where(#schedule article) a هي (0,0,1). درجة قاعدة .btn هي (0,1,0)، فتفوز الآن في اللون وزخرفة النص، بينما تظل الروابط العادية داخل المقال مطابقة للقاعدة الأساسية. إزالة الـ ID كليًا (مثل article a) ستنجح أيضًا، لكن :where() تتيح لك الإبقاء على النطاق الذي قصده النموذج الأولي.