{"id":"l-css-4-4","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"نظّم ملف أنماط ينمو باستخدام طبقات الـ cascade، ومستويات الـ tokens، وcomponents بـ class واحد، ومجموعة صغيرة من الـ utilities، ليستطيع الفريق تغيير الـ CSS دون خوف.","html":"

بدأت الواجهة الأمامية لـ Waypoint بمطوّر واحد وملف styles.css واحد. وبعد سنتين صار هناك خمسة مطوّرين، وأربعون component، وموقع مصغّر لأحد الرعاة يغيّر مظهر الجدول، وملف أنماط لا يجرؤ أحد على حذف شيء منه. كل إصلاح خطأ تجاوزٌ جديد، وكل تجاوز أثقل قليلًا من سابقه، وعدد !important لا يفعل إلا أن يزيد.

\n

هذه ليست مشكلة انضباط. إنها مشكلة معمارية، وكل ما في هذه الدورة حتى الآن يعطيك القطع اللازمة لإصلاحها.

\n

كومة الـ layers هي المعمارية

\n

ابدأ ملف الأنماط الرئيسي بتعليمة واحدة تسمّي كل نوع من الـ CSS لديك، بترتيب الأولوية:

\n
main.css
@layer reset, tokens, base, layouts, components, utilities;\n\n@import url(\"reset.css\") layer(reset);\n@import url(\"tokens.css\") layer(tokens);\n@import url(\"base.css\") layer(base);\n@import url(\"layouts/schedule.css\") layer(layouts);\n@import url(\"components/session-card.css\") layer(components);\n@import url(\"components/speaker.css\") layer(components);\n@import url(\"utilities.css\") layer(utilities);
\n

لكل layer مهمة واحدة:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
الـ layerتحتوي علىمثال
resetتوحيد افتراضيات المتصفّح*, *::before { box-sizing: border-box; }
tokenscustom properties فقط--color-brand، --space-m
baseأنماط العناصر المجرّدة، بـ specificity منخفضة:where(a) { color: var(--link); }
layoutsبنية الصفحة ومناطقها.schedule { display: grid; gap: … }
componentsكتلة واحدة لكل component.session-card { … }
utilitiesتجاوزات أحادية الغرض.u-hidden، .u-visually-hidden

لأن الـ layers تحسم التعارض بين الأنواع، تستطيع الـ selectors داخل كل layer أن تبقى مسطّحة: class واحد للـ component، و:where() للأنماط الأساسية. لا أحد يحتاج إلى ID أو سلسلة من ثلاثة classes ليفوز، فلا أحد يكتبها.

\n
\n ثلاثة مستويات من الـ tokens تصل بينها أسهم: قيم لوحة الألوان مثل violet 600 تغذّي tokens دلالية مثل color brand، وهذه تغذّي tokens الـ component مثل card accent. غلاف الراعي يتجاوز card accent. وبجانبها كومة الـ layers من reset إلى utilities.\n \n --violet-600\n \n \n --color-brand\n \n \n --card-accent\n \n .theme-sponsor\n \n ترتيب الـ layers\n 1 reset\n 2 tokens\n 3 base\n 4 layouts\n 5 components\n 6 utilities\n اللاحقة تفوز\n
تتدفّق الـ tokens من القيم الخام إلى الأدوار إلى الـ components، والـ layers تقرّر أيّ نوع من القواعد يفوز
\n

الـ tokens على ثلاثة مستويات

\n

قائمة مسطّحة من 200 custom property صعبة الصيانة بقدر 200 كود hex. وزّعها على مستويات:

\n
    \n
  1. لوحة الألوان: قيم خام، مسمّاة بحسب ماهيتها. --violet-600: oklch(52% 0.22 290);
    2. \n
  2. الدلالي: أدوار، مسمّاة بحسب الغرض منها. --color-brand: var(--violet-600); --surface: light-dark(…);
    3. \n
  3. الـ component: مقابض الـ component العامة، وقيمها الافتراضية tokens دلالية. --card-accent: var(--color-brand);
    4. \n
\n

أبقِ المستوى الأول صغيرًا ومملًّا: نحو اثني عشر لونًا (hue) لكلٍّ منها بضع درجات تكفي معظم المنتجات. القرارات المثيرة تحدث في المستوى الثاني، حيث يتّفق المصمّم والمطوّر على ما تعنيه «brand» أو «surface» أو «danger» في كل ثيم.

\n

الـ components لا تقرأ إلا المستويين الثاني والثالث. عندها تغيّر إعادة تصميم الهوية المستوى الأول، ويغيّر الوضع الداكن المستوى الثاني، وتغيّر صفحة الراعي المستوى الثالث على غلاف:

\n
CSS
@layer tokens {\n  :root {\n    --color-brand: oklch(52% 0.22 290);\n    --card-accent: var(--color-brand);\n  }\n  .theme-sponsor {\n    --card-accent: oklch(55% 0.11 210);\n  }\n}
\n

كل بطاقة داخل .theme-sponsor تصبح زرقاء مخضرّة: الحدّ والشارة وحالة المرور، كل شيء، لأنها كلها تقرأ --card-accent.

\n

قواعد الـ components

\n

حفنة من الأعراف تُبقي أربعين component قابلة للتوقّع:

\n\n\n

الـ utilities: قليلة وأخيرة

\n

الـ utilities classes أحادية الغرض يستطيع الـ HTML تطبيقها مباشرةً: .u-hidden و.u-visually-hidden و.u-flow (الإيقاع الرأسي). ضعها في آخر layer وستفوز على أيّ component دون !important. أبقِ المجموعة صغيرة ومملّة. إن وجدت نفسك تكتب .u-mt-17، فأنت تبني لغة تنسيق ثانية داخل الأولى؛ إطار utilities قائم على الـ design tokens خيار مشروع، لكن اجعله قرارًا مقصودًا، لا انجرافًا.

\n

تحديد النطاق بـ @scope

\n

حين يجب ألّا يُسرّب component أنماطه إلى محتوى متداخل، مثل ملخّص يعرضه الـ CMS داخل بطاقة، تحصر @scope القواعد في شجرة فرعية وتستطيع التوقّف عند حدّ داخلي:

\n
CSS
@scope (.session-card) to (.cms-content) {\n  p { margin-block: 0.5rem; }\n}
\n

قاعدة الفقرة تنطبق داخل البطاقات لا داخل .cms-content. أصبحت @scope ضمن Baseline في مارس 2026، فهي أداة حديثة؛ والـ layers والـ components ذات الـ class الواحد تحلّ معظم مشكلات النطاق أصلًا، و@scope تتولّى حالات «الكعكة المثقوبة» (donut) المتبقية.

\n\n

دورك الآن

\n

التمرين شريحة صغيرة من ملف الأنماط القديم: selectors بـ ID، و!important، وcomponent له margin خاصة به. أعد هيكلته في layers مع token للون تمييز البطاقة، وثيم للراعي، ومسافات يملكها التخطيط، وutility تفوز بنظافة. والدرس الأخير ينظر في كلفة كل هذه الـ CSS على المتصفّح، وفي كيفية إبقاء الحركات والتخطيطات سريعة.

\n","toc":[{"id":"sec-1","text":"كومة الـ layers هي المعمارية","level":2},{"id":"sec-2","text":"الـ tokens على ثلاثة مستويات","level":2},{"id":"sec-3","text":"قواعد الـ components","level":2},{"id":"sec-4","text":"الـ utilities: قليلة وأخيرة","level":2},{"id":"sec-5","text":"تحديد النطاق بـ @scope","level":2},{"id":"sec-6","text":"دورك الآن","level":2}],"takeaways":["ترتيب layers مثل reset, tokens, base, layouts, components, utilities يحسم التعارض بين أنواع الـ CSS، فتستطيع الـ selectors أن تبقى بـ class واحد.","الـ tokens تعمل أفضل على مستويات: قيم لوحة الألوان الخام، وأدوار دلالية مثل --color-brand، وخصائص على مستوى الـ component مثل --card-accent يستطيع العنصر الأب تجاوزها.","لا ينبغي للـ components أن تضبط الـ margins الخارجية الخاصة بها؛ التخطيط المحيط بها هو صاحب المسافات، وعادةً عبر gap.","أبقِ الـ utilities قليلة وأحادية الغرض، في الـ layer الأخيرة، لتفوز دون !important."],"further":[{"title":"Cascade layers (MDN guide)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers"},{"title":"@scope (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope"},{"title":"Organizing your CSS (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Organizing"}],"quiz":[{"q":"

صفحة الراعي تحتاج إلى أن يكون لون التمييز في كل بطاقة جلسة أزرق مخضرًا (teal) بدل البنفسجي. في معمارية مبنية على الـ tokens، ما التغيير الصحيح؟

","options":[{"text":"أضف .sponsor-page .session-card { border-color: teal !important; }.","why":"هذا يتجاوز خاصية واحدة بالقوة الغاشمة؛ وتبقى الشارة وحالة المرور وكل ما يستخدم لون التمييز بنفسجية."},{"text":"انسخ CSS البطاقة إلى شكل .session-card--sponsor بقيم teal.","why":"CSS الـ component المكرّرة تنحرف عن الأصل في أول مرة يعدّل فيها أحدهم الأصل."},{"text":"اضبط --card-accent: teal على غلاف صفحة الراعي.","why":"صحيح. البطاقة تقرأ --card-accent في كل مكان تستخدم فيه لون التمييز، والـ custom properties موروثة، فيغيّر تصريح واحد ثيم كل جزء من كل بطاقة بداخله."}],"answer":2},{"q":"

لماذا لا ينبغي أن تضبط .session-card قيمة margin-bottom: 16px على نفسها؟

","options":[{"text":"لأن الـ margins لا تعمل على عناصر grid.","why":"الـ margins تعمل على عناصر grid؛ المشكلة في من يقرّر المسافات."},{"text":"لأن المسافات تعتمد على مكان وضع البطاقة، فيجب أن يملكها التخطيط المحيط بها، عبر gap مثلًا.","why":"صحيح. البطاقة نفسها تجلس في شبكة وفي شريط جانبي وفي شريط عرض متحرّك (carousel)؛ ولكل سياق مسافات مختلفة، والـ margin المدمجة تحاربها كلها."},{"text":"لأن الـ margins أبطأ في الرسم من gap.","why":"لا فرق يُذكر في الأداء؛ المسألة مسألة ملكية وإعادة استخدام."},{"text":"لأنه يجب استخدام الخصائص المنطقية بدلًا منها.","why":"margin-block-end ستعاني المشكلة نفسها؛ المشكلة في أن الـ component يضع مسافاته بنفسه، لا في اسم الخاصية."}],"answer":1},{"q":"

أين يجب أن تعيش الـ utility .u-hidden { display: none; } لتتغلّب دائمًا على قواعد display في الـ components دون !important؟

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

Sponsor Talk: Shipping at Scale

\n Draft\n
\n
\n
\n

CSS Architecture at Scale

\n Platform\n
\n
","css":"h3 { margin: 0 0 8px; }\n\n#schedule .session-card {\n padding: 12px;\n margin-bottom: 16px;\n border-left: 6px solid #6d28d9;\n border-radius: 10px;\n background: #f8fafc;\n}\n#schedule .session-card .badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n background: #ede9fe;\n}\n.theme-sponsor .session-card {\n border-left-color: #0e7490 !important;\n}\n.u-hidden { display: none !important; }\n"},"solution":{"html":"
\n
\n
\n

Sponsor Talk: Shipping at Scale

\n Draft\n
\n
\n
\n

CSS Architecture at Scale

\n Platform\n
\n
","css":"@layer reset, tokens, layouts, components, utilities;\n\n@layer reset {\n h3 { margin: 0 0 8px; }\n}\n\n@layer tokens {\n :root {\n --color-brand: #6d28d9;\n --card-accent: var(--color-brand);\n }\n .theme-sponsor {\n --card-accent: #0e7490;\n }\n}\n\n@layer layouts {\n .schedule {\n display: grid;\n gap: 16px;\n }\n}\n\n@layer components {\n .session-card {\n padding: 12px;\n border-inline-start: 6px solid var(--card-accent);\n border-radius: 10px;\n background: #f8fafc;\n\n .badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n background: #ede9fe;\n }\n }\n}\n\n@layer utilities {\n .u-hidden { display: none; }\n}\n"},"checks":[{"id":"layer-order","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); const stmt = all.find((r) => r instanceof CSSLayerStatementRule); if (!stmt) return false; const names = [...stmt.nameList]; const want = ['reset', 'tokens', 'components', 'utilities']; const idx = want.map((n) => names.indexOf(n)); return idx.every((i) => i >= 0) && idx.every((v, i) => i === 0 || v > idx[i - 1]);"},{"id":"no-ids-or-important","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); const src = [...document.querySelectorAll('style')].map((s) => s.textContent).join(''); return !src.includes('!important') && !all.some((r) => r.selectorText && r.selectorText.includes('#'));"},{"id":"accent-token","test":"return style('#regular', 'border-left-color') === 'rgb(109, 40, 217)' && style('#regular', '--card-accent').trim() !== '';"},{"id":"sponsor-theme","test":"return style('#sponsored', 'border-left-color') === 'rgb(14, 116, 144)' && style('.theme-sponsor', '--card-accent').trim() !== '';"},{"id":"token-drives-card","test":"const w = $('.theme-sponsor'); w.style.setProperty('--card-accent', 'rgb(1, 2, 3)'); await tick(16); const c = style('#sponsored', 'border-left-color'); w.style.removeProperty('--card-accent'); await tick(16); return c === 'rgb(1, 2, 3)';"},{"id":"utility-wins","test":"return style('#sponsored .badge', 'display') === 'none' && style('#regular .badge', 'display') === 'inline-block';"},{"id":"layout-owns-spacing","test":"const a = $('#sponsored').getBoundingClientRect(); const b = $('#regular').getBoundingClientRect(); return parseFloat(style('#regular', 'margin-bottom')) === 0 && parseFloat(style('#sponsored', 'margin-bottom')) === 0 && Math.abs(b.top - a.bottom - 16) < 1;"}],"title":"أعد هيكلة البطاقة في معمارية","prompt":"

أعد هيكلة هذه الشريحة من ملف الأنماط القديم. أبقِ الـ HTML كما هو.

\n
    \n
  1. أعلن layers تتضمّن reset وtokens وcomponents وutilities بهذا الترتيب (يمكنك إضافة layouts أو غيرها بينها)، وضع كل قاعدة في layer.
    2. \n
  2. لا selectors بـ ID ولا !important في أيّ مكان.
    3. \n
  3. حدّ التمييز في البطاقة يقرأ token اسمه --card-accent قيمته الافتراضية #6d28d9؛ و.theme-sponsor تضبطه على #0e7490.
    4. \n
  4. ما زالت .u-hidden تخفي شارة Draft.
    5. \n
  5. البطاقات بلا margins خاصة بها؛ وتخطيط .schedule يضع 16px بينها.
    6. \n
\n","hints":["ابدأ بتعليمة الـ layers، ثم انقل كل قاعدة موجودة إلى الـ layer التي تطابق وظيفتها.","الـ tokens: :root { --card-accent: #6d28d9; } و.theme-sponsor { --card-accent: #0e7490; }. والبطاقة تستخدم border-inline-start: 6px solid var(--card-accent);.","المسافات: احذف margin البطاقة وأعطِ .schedule القيم display: grid; gap: 16px;. وضع .u-hidden في layer الـ utilities، دون !important."],"explanation":"

تعليمة الـ layers تُخرج حسم التعارضات من الـ selectors: .u-hidden في آخر layer تتغلّب على display: inline-block في الـ component بـ specificity عادية (0,1,0)، فلا حاجة إلى IDs ولا إلى !important. والبطاقة تقرأ --card-accent بدل لون مكتوب يدويًا، فتغيّر .theme-sponsor ثيم كل بطاقة بداخلها بـ custom property واحدة، وأيّ جزء مستقبلي من البطاقة يستخدم لون التمييز سيتبعها تلقائيًا. ونقل المسافات إلى .schedule { gap: 16px; } يتيح للبطاقة نفسها أن تنتقل إلى شريط جانبي أو carousel دون أن تحارب margin مدمجة.

\n","checkLabels":{"layer-order":"الـ layers reset وtokens وcomponents وutilities مُعلنة بالترتيب","no-ids-or-important":"لا selectors بـ ID ولا !important","accent-token":"البطاقات العادية تستخدم token --card-accent البنفسجي","sponsor-theme":"بطاقات الراعي زرقاء مخضرّة عبر الـ token","token-drives-card":"تغيير --card-accent يغيّر ثيم البطاقة","utility-wins":"الـ utility u-hidden ما زالت تخفي شارة Draft","layout-owns-spacing":"البطاقات بلا margins؛ والتخطيط يباعد بينها 16px"}},"words":673,"readMinutes":4}