{"id":"l-css-1-3","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"نظّم ملف الأنماط في طبقات cascade بحيث تفوز مجموعات الأنماط كاملة (إعادة الضبط والـ components والـ utilities) بحسب ترتيب الـ layers لا بحسب الـ specificity.","html":"

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

\n

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

\n

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

\n

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

\n
styles.css
@layer reset, base, components, utilities;
\n

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

\n
CSS
@layer components {\n  .schedule .session-card .badge {\n    background: #ede9fe;\n    color: #5b21b6;\n  }\n}\n\n@layer utilities {\n  .bg-accent { background: #fde68a; }\n}
\n

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

\n
\n طبقات مرصوصة من الأقل أولوية إلى الأعلى: reset ثم base ثم components ثم utilities، وفي القمة الأنماط خارج الـ layers. سهم على اليمين يشير إلى الأعلى بعنوان أولوية أعلى.\n \n @layer reset\n \n @layer base\n \n @layer components\n \n @layer utilities\n \n أنماط خارج الـ layers\n \n أولوية\n أعلى\n
الـ layers اللاحقة تفوز في التصريحات العادية، والأنماط خارج الـ layers تجلس في القمة
\n

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

\n

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

\n

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

\n

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

\n\n

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

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

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

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

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

\n\n

دورك الآن

\n

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

\n","toc":[{"id":"sec-1","text":"أعلن الترتيب ثم املأ الـ layers","level":2},{"id":"sec-2","text":"الأنماط خارج الـ layers تفوز","level":2},{"id":"sec-3","text":"التصريحات المهمّة تقلب الترتيب","level":2},{"id":"sec-4","text":"الـ layers المتداخلة والتراجع","level":2},{"id":"sec-5","text":"تبنّي الـ layers في قاعدة كود قائمة","level":2},{"id":"sec-6","text":"دورك الآن","level":2}],"takeaways":["أعلن ترتيب الـ layers مرة واحدة في الأعلى بـ @layer reset, base, components, utilities;، والـ layers اللاحقة تفوز على السابقة بغضّ النظر عن الـ specificity.","الـ specificity ما زالت مهمة، لكن فقط بين التصريحات الموجودة داخل الـ layer نفسها.","الأنماط العادية التي لا تنتمي إلى أيّ layer تتغلّب على كل نمط داخل layer، لذا غلّف الـ CSS القديمة أو الخارجية في layer بدل أن تتركها طليقة.","!important تعكس ترتيب الـ layers: التصريح المهمّ في layer مبكرة يتغلّب على التصريح المهمّ في layer لاحقة."],"further":[{"title":"@layer (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer"},{"title":"Cascade layers (MDN guide)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers"},{"title":"A complete guide to CSS cascade layers (CSS-Tricks)","url":"https://css-tricks.com/css-cascade-layers/"}],"quiz":[{"q":"

ما الخلفية التي يأخذها .badge.sold-out؟

\n
CSS
@layer components, utilities;\n@layer utilities { .sold-out { background: gold; } }\n@layer components { .schedule .card .badge { background: lavender; } }
\n","options":[{"text":"lavender، لأن الـ selector الخاص بها أعلى specificity.","why":"الـ specificity لا تُقارَن إلا داخل الـ layer الواحدة. القاعدتان في layerين مختلفتين، لذا يحسم ترتيب الـ layers أولًا."},{"text":"lavender، لأن كتلة components تظهر لاحقًا في الملف.","why":"ترتيب الـ layers يأتي من أول تعليمة @layer، لا من موضع ظهور كل كتلة."},{"text":"gold، لأن utilities أُعلنت بعد components.","why":"صحيح. الـ layers المُعلنة لاحقًا تفوز في التصريحات العادية، قبل أن تُستشار الـ specificity."}],"answer":2},{"q":"

أضفت @layer reset, components; وغلّفت الكود، لكن قاعدة قديمة h2 { color: black; } تقع خارج أيّ layer ما زالت تتجاوز عناوين الـ components لديك. لماذا؟

","options":[{"text":"الأنماط العادية خارج الـ layers أولويتها أعلى من كل الـ layers.","why":"صحيح. الأنماط غير المنتمية إلى layer تتصرّف كأنها layer أخيرة ضمنية. غلّف الـ CSS القديمة في layer مبكرة خاصة بها لتخفض رتبتها."},{"text":"selectors الأنواع تتغلّب دائمًا على القواعد داخل الـ layers.","why":"نوع الـ selector لا علاقة له بالأمر؛ أيّ selector خارج الـ layers، حتى *، يتغلّب على القواعد داخلها في التصريحات العادية."},{"text":"يتجاهل المتصفّح @layer حين يخلط الملف بين قواعد داخل الـ layers وخارجها.","why":"الخلط مدعوم بالكامل. يضع المتصفّح كل القواعد غير المنتمية إلى layer في layer ضمنية فوق الـ layers المسمّاة."},{"text":"قاعدة h2 تُحمَّل أولًا، فتُثبَّت.","why":"ترتيب الظهور آخر ما يكسر التعادل، وهنا تفصل الـ layers بين القاعدتين أصلًا."}],"answer":0},{"q":"

كيف تضع ملف أنماط من طرف ثالث في الـ layer الأقل أولوية؟

","options":[{"text":"@layer vendor { @import url(picker.css); }","why":"لا يمكن أن تظهر @import داخل كتلة layer؛ يجب أن تأتي تعليمات الاستيراد في أعلى ملف الأنماط."},{"text":"@import url(picker.css) layer(vendor); بعد إعلان @layer vendor, base, components;","why":"صحيح. الدالة layer() على @import تضع الملف كله في الـ layer المسمّاة، وتعليمة الترتيب تجعل تلك الـ layer أولى الطبقات."},{"text":"<link rel="stylesheet" href="picker.css" layer="vendor">","why":"لا توجد سمة layer على <link>؛ وضع ملف في layer يكون عبر @import … layer()."}],"answer":1},{"q":"

في layer اسمها components يقول تصريح color: red !important، وفي layer لاحقة اسمها utilities يقول تصريح آخر color: blue !important. أيّهما يفوز؟

","options":[{"text":"blue، لأن utilities هي الـ layer اللاحقة.","why":"هذه قاعدة التصريحات العادية. أما في التصريحات المهمّة فينقلب ترتيب الـ layers."},{"text":"red، لأن التصريحات المهمّة تعكس ترتيب الـ layers.","why":"صحيح. هذا الانعكاس يتيح لـ layer منخفضة (مثل إعادة الضبط) أن تحمي قيمة بـ !important لا تستطيع الـ layers اللاحقة تجاوزها."},{"text":"صاحب الـ selector الأعلى specificity.","why":"ترتيب الـ layers يُحسم قبل الـ specificity دائمًا؛ والـ specificity لا تقارن إلا تصريحات من الـ layer نفسها."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

Container Queries in Production

\n Layout\n Sold out\n
\n
","css":"/* reset */\n* { box-sizing: border-box; }\nh2 { margin: 0 0 0.5rem; }\n\n/* components */\n.schedule .session-card .badge {\n display: inline-block;\n padding: 0.2em 0.7em;\n border-radius: 999px;\n background: #ede9fe;\n color: #5b21b6;\n}\n\n/* utilities: these should always win */\n.bg-accent { background: #fde68a; }\n"},"solution":{"html":"
\n
\n

Container Queries in Production

\n Layout\n Sold out\n
\n
","css":"@layer reset, components, utilities;\n\n@layer reset {\n * { box-sizing: border-box; }\n h2 { margin: 0 0 0.5rem; }\n}\n\n@layer components {\n .schedule .session-card .badge {\n display: inline-block;\n padding: 0.2em 0.7em;\n border-radius: 999px;\n background: #ede9fe;\n color: #5b21b6;\n }\n}\n\n@layer utilities {\n .bg-accent { background: #fde68a; }\n}\n"},"checks":[{"id":"utility-wins","test":"return style('.badge.bg-accent', 'background-color') === 'rgb(253, 230, 138)';"},{"id":"component-kept","test":"const b = $$('.badge').find((el) => !el.classList.contains('bg-accent')); return style(b, 'background-color') === 'rgb(237, 233, 254)' && style(b, 'color') === 'rgb(91, 33, 182)';"},{"id":"uses-layers","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); return all.some((r) => r instanceof CSSLayerBlockRule);"},{"id":"selector-unchanged","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); return all.some((r) => r.selectorText === '.schedule .session-card .badge');"},{"id":"no-important","test":"return ![...document.querySelectorAll('style')].some((s) => s.textContent.includes('!important'));"}],"title":"دع الـ utility تفوز بالـ layers","prompt":"

يجب أن تكون شارة Sold out صفراء (#fde68a) لأنها تحمل الـ utility .bg-accent، لكن selector الـ component .schedule .session-card .badge يتفوّق عليها في الدرجة. ضع القواعد في طبقات cascade (reset وcomponents وutilities بهذا الترتيب) لتفوز الـ utilities. أبقِ كل selector كما هو تمامًا ولا تستخدم !important. ويجب أن تحتفظ شارة Layout العادية بنمط الـ component الخزامي (lavender).

\n","hints":["ابدأ ملف الأنماط بتعليمة واحدة تعلن أسماء الـ layers الثلاث بترتيب أولويتها.","غلّف كل مجموعة قواعد بـ @layer name { … }. الترتيب داخل الملف لا يهم بعد أن تثبّته التعليمة.","@layer reset, components, utilities; ثم @layer components { … } و@layer utilities { .bg-accent { … } }."],"explanation":"

تعليمة @layer reset, components, utilities; تثبّت الترتيب، فيتغلّب أيّ تصريح عادي في utilities على أيّ تصريح في components، قبل مقارنة الـ specificity. يحتفظ selector الشارة بوزنه (0,3,0)، وهو وزن ما زال مهمًا داخل layer الـ components، لكنه لم يعد يتنافس مع الـ utility. ترك .bg-accent خارج الـ layers سيجعلها تفوز أيضًا، لأن الأنماط خارج الـ layers تتغلّب على ما بداخلها، لكن تسمية الـ layer تُبقي النيّة واضحة لمن يأتي بعدك.

\n","checkLabels":{"utility-wins":"شارة Sold out صفراء","component-kept":"شارة Layout تحتفظ بنمط الـ component الخزامي","uses-layers":"الـ CSS تستخدم كتل @layer","selector-unchanged":"selector الـ component لم يتغيّر","no-important":"لا توجد !important في أيّ مكان من الـ CSS"}},"words":708,"readMinutes":4}