CSS Academy · درس

تحديد نطاق المتغيرات للمكوّنات

حدّد نطاق متغيرات CSS لعناصر المكوّنات لإنشاء أنظمة أنماط معزولة وقابلة لإعادة الاستخدام

تحديد نطاق المتغيرات للمكوّنات درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

لماذا نحدد نطاق الخصائص المخصصة؟

تؤثر الخصائص المخصصة العامة في الصفحة بأكملها. يؤدي تحديد نطاق الخصائص المخصصة ليقتصر على مكوّن إلى عزل الأنماط ومنع التوارث غير المقصود بين المكوّنات.

النطاق على مستوى المكوّن

عرّف الخصائص المخصصة على محدد الجذر للمكوّن. ترثها العناصر الابنة، لكن العناصر الموجودة خارج المكوّن لا ترثها.

<div class="card">Scoped card variables</div>

تجاوز المتغيرات محددة النطاق

يمكن للمكوّن تعريف صيغ مختلفة للسمات من خلال تجاوز خصائصه المخصصة في أصناف التعديل:

<div class="card">Default</div>
<div class="card card--dark">Dark</div>
<div class="card card--blue">Blue</div>

قيمة احتياطية عامة مع تجاوز محلي

نمط تصميم: القيم العامة في :root، والتجاوزات المحلية على المكوّن. يستخدم المكوّن الرموز العامة، لكنه يتيح تخصيصها محليًا.

<button>Royalblue (global)</button>
<div class="sidebar">
  <button>Coral (sidebar override)</button>
</div>

طبقات الخصائص المخصصة في CSS

يحتوي نظام التصميم المنظم جيدًا على طبقات متعددة من الخصائص المخصصة:

الرموز العامة: قيم خام مثل الألوان والأحجام
الرموز الدلالية: قيم مبنية على المعنى مثل (--color-action)
رموز المكوّنات: قيم خاصة بالمكوّن مثل (--button-bg)

واجهة برمجة الأنماط المضمّنة

اعرض متغيرات المكوّن كواجهة برمجة عامة عبر الأنماط المضمّنة من JavaScript أو سمات HTML. يتيح ذلك للمستخدمين تخصيص المكوّنات دون تعديل CSS.

<div class="card" style="--card-bg: pink;">
  Content
</div>

تحديد النطاق باستخدام @scope (حديث)

توفر قاعدة at-rule الجديدة @scope تحديدًا صريحًا لنطاق CSS دون الاعتماد على تسمية الأصناف:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Card body</p>
</div>

العزل باستخدام data-theme

استخدم سمة data-theme لتحديد نطاق شجرة فرعية كاملة بحيث تستخدم سمة مختلفة:

<div class="panel">Light theme (default)</div>
<div data-theme="dark" class="panel">Dark theme</div>

منع تسرّب الخصائص

يمتد نطاق الخصائص المخصصة إلى العنصر ونسله. ومع ذلك، لا يمكن الوصول إلى الخصائص المعرّفة في عنصر نسل إلا من ذلك العنصر ونسله هو؛ فهي لا تتسرّب إلى العناصر الأب أو الشقيقة.

متغيرات محددة النطاق ومتجاوبة

تعمل الخصائص المخصصة محددة النطاق بصورة رائعة مع استعلامات الحاوية:

<div class="card">
  <div class="card__inner">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

توثيق رموز المكوّنات

وثّق واجهة الخصائص المخصصة للمكوّن حتى يعرف المطورون المتغيرات التي يمكن تجاوزها. من الأنماط الجيدة إدراجها كتعليقات في أعلى ورقة أنماط المكوّن.

تحقق سريع

خُصصت خاصية مخصصة --color-accent على عنصر .card. هل يمكن لعنصر شقيق .nav أن يرث هذا المتغير؟

مراجعة

حدّد نطاق الخصائص المخصصة ليقتصر على محددات المكوّنات، واعزلها بذلك عن النطاق العام. استخدم أصناف التعديل لتجاوز المتغيرات محددة النطاق للصيغ المختلفة. ترتب أنظمة التصميم الطبقات بهذا التسلسل: الرموز العامة ← الرموز الدلالية ← رموز المكوّنات. اعرض المتغيرات كواجهة برمجة للمكوّن لإتاحة التخصيص الخارجي.

الأسئلة الشائعة

هل درس «تحديد نطاق المتغيرات للمكوّنات» مجاني؟

نعم — نص درس «تحديد نطاق المتغيرات للمكوّنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «تحديد نطاق المتغيرات للمكوّنات»؟

حدّد نطاق متغيرات CSS لعناصر المكوّنات لإنشاء أنظمة أنماط معزولة وقابلة لإعادة الاستخدام تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تحديد نطاق المتغيرات للمكوّنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy