CSS Academy · درس

التداخل الأصلي في CSS

اكتب قواعد CSS متداخلة دون معالج مسبق باستخدام مواصفة التداخل الأصلية في CSS.

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

ما CSS Nesting؟

يتيح CSS Nesting الأصلي (ضمن خط الأساس منذ 2024، وفي جميع المتصفحات الحديثة) كتابة قواعد CSS داخل قواعد أخرى، مع محاكاة صيغة التداخل التي كانت متاحة سابقًا في معالجات Sass وLess فقط. ترث القواعد المتداخلة تلقائيًا سياق المحدد الأصلي.

صيغة التداخل الأساسية

اكتبوا المحددات الفرعية داخل كتلة قاعدة الأصل. يدمج المتصفح المحددين الأصلي والفرعي تلقائيًا. يشير & (محدد التداخل) صراحةً إلى المحدد الأصلي عند استخدام المعدلات والأصناف الزائفة.

<div class="card is-active">
  <div class="title">Nested Card Title</div>
  <p>Card body text.</p>
</div>

محدد التداخل &

يمثل & المحدد الأصلي صراحةً في القواعد المتداخلة. استخدموه مع الأصناف الزائفة (&:hover) والعناصر الزائفة (&::before) وأصناف التعديل (&.active) ومحددات السمات (&[disabled]). من دون &, تنشئ القواعد المتداخلة محددات للعناصر السليلة.

تداخل العناصر الزائفة

يمكنكم تداخل قواعد العناصر الزائفة طبيعيًا داخل الأصل: .button { &::before { content: ""; } &::after { content: ""; } }. يضع هذا جميع تنسيقات الزر في موضع واحد، متجنبًا تكرار المحددات الذي تتطلبه CSS المسطحة.

تداخل قواعد at-rule

يمكن تداخل استعلامات الوسائط وقواعد at-rule الأخرى داخل القواعد (Chrome 112+ وFirefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. تبقى التنسيقات المتجاوبة مع العنصر الذي تؤثر فيه بدلًا من وضعها في كتلة استعلام وسائط منفصلة في نهاية الملف.

خصوصية المحددات

لا يغير التداخل قواعد الخصوصية؛ إذ يمتلك المحدد المدمج الخصوصية نفسها التي كان سيمتلكها لو كُتب بصيغة مسطحة. يمتلك .card .title الخصوصية نفسها (0,2,0) سواء كُتب بصورة متداخلة أو مسطحة. التداخل تسهيل نحوي، وليس تغييرًا في الخصوصية.

العنصر السليل الضمني مقابل & الصريح

ينشئ المحدد المتداخل من دون & محددًا لعنصر سليل: .card { .title {} } يُحوَّل إلى .card .title. ومع &: .card { &.active {} } يُحوَّل إلى .card.active (من دون مسافة، لأنه صنف تعديل وليس عنصرًا سليلًا).

BEM مع التداخل الأصلي

لا يُعد التداخل الأصلي مثاليًا لـ BEM؛ فمحددات .block__element و.block--modifier عبارة عن سلاسل نصية، ولا يستطيع التداخل إنشاءها باستخدام & وحده. استخدموا التداخل مع الأصناف الزائفة وهياكل المكونات المتداخلة بدلًا من دمج سلاسل BEM، الذي لا يزال يتطلب معالجًا مسبقًا.

الترحيل من Sass

تتطابق معظم صيغ تداخل Sass مع تداخل CSS الأصلي. الاستثناء هو أن Sass يسمح بدمج السلاسل باستخدام &-modifier، بينما لا تسمح CSS الأصلية بذلك. رحّلوا الكود عبر البحث عن الأنماط &- أو &__ وتسطيح تلك القواعد تحديدًا، مع الإبقاء على بقية التداخل.

دعم المتصفحات

يدعم Chrome 112+ وFirefox 117+ وSafari 16.5+ تداخل CSS الأصلي. ولدعم المتصفحات الأقدم، استخدموا PostCSS مع postcss-nesting لتحويل صيغة التداخل الأصلية إلى CSS مسطحة أثناء عملية البناء، ما يتيح التأليف باستخدام التداخل الأصلي اليوم.

أدوات المطور والتداخل

يعرض Chrome DevTools القواعد المتداخلة في لوحة Styles بصيغتها المتداخلة. يؤدي النقر على قاعدة متداخلة إلى الانتقال إلى موضع المصدر الصحيح في لوحة Sources. ويكون تصحيح أخطاء CSS المتداخلة واضحًا بقدر تصحيح أخطاء CSS المسطحة في أدوات المطور الحديثة.

اختبار المعرفة

ما الفرق بين التداخل باستخدام محدد & والتداخل من دونه؟

الملخص

يتيح تداخل CSS الأصلي صيغة متداخلة شبيهة بـ Sass داخل CSS العادية. ينشئ المحدد & محددات مركبة للأصناف الزائفة والعناصر الزائفة وأصناف التعديل. وتضع استعلامات @media المتداخلة التنسيقات المتجاوبة بجوار عناصرها. يحول PostCSS التداخل الأصلي ليتوافق مع المتصفحات الأقدم، ما يتيح اعتماده تدريجيًا اليوم.

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

هل درس «التداخل الأصلي في CSS» مجاني؟

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

ماذا ستتعلم في «التداخل الأصلي في CSS»؟

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

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

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

كم من الوقت يستغرق درس «التداخل الأصلي في CSS»؟

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

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

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

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

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