طبقات الـ Cascade باستخدام @layer

نما في ملف أنماط Waypoint أربعة أنواع من CSS: إعادة ضبط (reset)، وأنماط أساسية للعناصر، وcomponents مثل بطاقة الجلسة، وأدوات utilities ذات المهمّة الواحدة مثل .bg-accent يرشّها فريق المحتوى في الـ HTML. يُفترض أن تفوز الـ utilities؛ فهذا هو الغرض منها أصلًا. لكن selector component مثل .schedule .session-card .badge درجته (0,3,0)، والـ utility درجتها (0,1,0)، فتخسر الـ utility ويكتب أحدهم !important من جديد.

لم تُصمَّم الـ specificity قطّ للتعبير عن أن «هذه المجموعة من الأنماط أعلى رتبة من تلك». أما طبقات الـ cascade (cascade layers) فصُمِّمت لهذا بالضبط.

أعلن الترتيب ثم املأ الـ layers

الـ layer (طبقة) وعاء مسمّى من القواعد. تعلن الترتيب مرة واحدة، في أعلى ملف الـ CSS:

@layer reset, base, components, utilities;

ثم تضع القواعد في الـ layers، بأيّ ترتيب ومن أيّ ملف:

@layer components {
  .schedule .session-card .badge {
    background: #ede9fe;
    color: #5b21b6;
  }
}

@layer utilities {
  .bg-accent { background: #fde68a; }
}

الآن تفوز .bg-accent على خلفية الـ component رغم أن الـ specificity الخاصة بها أقل. حين يصل الـ cascade إلى الخطوة 3 (الـ layers) يرى أن التصريحين من layerين مختلفتين، فيختار المُعلنة لاحقًا، ولا يصل إلى الـ specificity أبدًا. أما داخل الـ layer الواحدة فتعمل الـ specificity وترتيب الظهور كما تعرفهما.

أول تعليمة @layer هي التي تثبّت الترتيب. إن كتبت @layer utilities { … } قبل أن تعلن components أصلًا، تصبح utilities هي الـ layer الأولى (الأدنى). لهذا مكان تعليمة الترتيب في أعلى ملف الأنماط الرئيسي تمامًا.

الأنماط خارج الـ layers تفوز

أيّ قاعدة عادية ليست داخل layer تذهب إلى layer ضمنية تتغلّب على كل الـ layers المسمّاة. يبدو هذا معكوسًا في البداية، لكنه ما يجعل تبنّي الـ layers ممكنًا: تستطيع تغليف الكود الجديد في layers اليوم، وتحتفظ الـ CSS الحالية غير المنتمية إلى layer بسلوكها كما هو.

والوجه الآخر لهذا فخّ كلاسيكي.

ويمكن وضع ملفات الأطراف الثالثة في layer مباشرةً عند استيرادها:

@layer vendor, reset, base, components, utilities;
@import url("calendar-widget.css") layer(vendor);

لاحظ أن قواعد @import يجب أن تأتي قبل أيّ قواعد أخرى باستثناء @charset وتعليمات @layer، ولهذا بالضبط تستطيع تعليمة الترتيب أن تجلس فوقها.

التصريحات المهمّة تقلب الترتيب

في تصريحات !important تنعكس أولوية الـ layers: القاعدة المهمّة في reset تتغلّب على القاعدة المهمّة في utilities، والقواعد المهمّة داخل الـ layers تتغلّب على المهمّة خارجها. وهذا يحاكي طريقة عمل المصادر (قاعدة المستخدم المهمّة تتغلّب على قاعدتك)، ويعطي الـ layers المنخفضة طريقة لحماية ما هو جوهري. تستطيع إعادة الضبط أن تثبّت [hidden] { display: none !important; } فلا يستطيع أيّ component أن يُظهر محتوى مخفيًا بالخطأ.

الـ layers المتداخلة والتراجع

يمكن أن تتداخل الـ layers: @layer components.cards { … } تنشئ layer اسمها cards داخل components، وتُحسم أولويتها داخل الـ layer الأم. تستخدم الفرق هذا لإعطاء كل مجلد components طبقة فرعية خاصة به دون أن يتأثّر الترتيب العام.

وهناك كلمة مفتاحية أخرى تعمل مع الـ layers: revert-layer. ضبط color: revert-layer يعيد الخاصية إلى ما كانت ستنتجه الـ layers السابقة، كأن تصريح هذه الـ layer غير موجود. وهي مفيدة في utility مثل .reset-color { color: revert-layer; }.

تبنّي الـ layers في قاعدة كود قائمة

لا تحتاج إلى إعادة كتابة. في قاعدة كود Waypoint استغرق الانتقال ظهيرة واحدة وثلاث خطوات:

1. أضف تعليمة الترتيب في أعلى ملف الأنماط الرئيسي تمامًا، وضع layer اسمها legacy أولًا.
2. غلّف كل ملف موجود بـ @layer legacy { … }، أو استورده بـ layer(legacy). لن يتغيّر شيء بصريًا، لأن القواعد القديمة ما زالت تتنافس فيما بينها تمامًا كما كانت.
3. كلما لمست component، انقل قواعده من legacy إلى components. كل نقلة كهذه لا يمكن إلا أن تجعل كودك الجديد أقوى مقارنةً بالقديم، لا أضعف أبدًا.

العائد يصل سريعًا: تتوقّف الـ components الجديدة عن الحاجة إلى selectors ثقيلة لتهزم القديمة، وتستطيع حذف تصريحات !important واحدًا تلو الآخر كلما زال سببه.

دورك الآن

في التمرين، لشارة Waypoint selector component ثقيل وutility يجب أن تتجاوزه. ضع القواعد في layers لتفوز الـ utility دون تعديل أيّ selector ودون إضافة !important. الـ layers تحسم «أيّ مجموعة تفوز»؛ والدرس التالي يتناول «أيّ قيمة»، باستخدام الـ custom properties كمقابض تكشفها الـ components لديك.