أتقن معياري التتالي الجديدين - الطبقات وقرب النطاق - لهندسة أنماطك دون حروب خصوصية.
افتح هذا الدرس في Kodokonيحسم التتالي التعارض بين التصريحات باستخدام معايير مرتّبة: الأصل والأهمية، ثم السياق، ثم أنماط سمة style، ثم الطبقات (@layer)، ثم الخصوصية، ثم ترتيب الظهور. النقطة الحاسمة: تُقيَّم الطبقات قبل الخصوصية. لذا فإن قاعدة .button في طبقة ذات أولوية أعلى تتغلب على #nav div.menu a.button في طبقة ذات أولوية أدنى - فخصوصيتها البالغة (1,2,2) لا تساوي شيئًا أمام ترتيب الطبقات. هذا ما يجعل @layer قويًا جدًا في هندسة نظام تصميم: تُعلَن الأولوية مرة واحدة، بنيويًا، بدلًا من التنازع عليها محددًا تلو الآخر.
@layer reset, base, components, utilities;
@layer components {
.button { background: rebeccapurple; }
}
@layer base {
button { background: gray; }
}دقيقتان في المواصفة عليك معرفتهما حتمًا. الأولى: الأنماط الموجودة خارج أي طبقة تتغلب على الأنماط المُطبَّقة داخل طبقات (بالنسبة إلى التصريحات العادية) - فهي تشكّل طبقة ضمنية توضع في الأخير. لذا تتغلب تجاوزاتك المحلية دائمًا على المكتبة المُطبَّقة داخل طبقات. الثانية: مع !important، ينقلب الترتيب بالكامل. تفوز الطبقات المُعلَنة أولًا، ويتغلب !important داخل طبقة على !important خارج أي طبقة. فتصريح !important في طبقة reset لديك يصبح شبه لا يُقهَر.
@layer base, theme;
@layer base {
a { color: black !important; }
}
@layer theme {
a { color: purple !important; }
}يحدّ @scope مجموعة من القواعد بين جذر النطاق وحد سفلي اختياري: يستهدف @scope (.card) to (.card__content) العناصر التي هي أحفاد لـ .card لكنها خارج .card__content - وهو نطاق الكعكة (donut scope) الشهير، المثالي لتنسيق إطار مكوّن دون التسرب إلى محتواه المحقون. وفي الداخل، يشير :scope إلى الجذر نفسه. ويُدخِل @scope معيار تتالٍ جديدًا تمامًا: القرب. فعند تساوي الخصوصية، تفوز القاعدة التي يكون جذر نطاقها الأقرب إلى العنصر - شيء لم يكن بمقدور BEM ولا المُركِّبات أن يعبّرا عنه قط.
@scope (.card) to (.card__content) {
:scope {
padding: 1rem;
border: 1px solid oklch(0.85 0.02 260);
}
img { border-radius: 8px; }
}