جاري التحميل...

التداخل (Nesting) في CSS

منحتَ القيم أسماءً بالمتغيّرات، وحسبتَها بـ calc ورفاقها. التداخل (nesting) ينظّم المحدّدات التي تستخدم تلك القيم: ضع عنوان البطاقة وزرّها وحالات hover داخل .card بدل تكرار اسم الأب في كل قاعدة عبر الملف.

تداخل محدّد ابن

اكتب قاعدة داخل قاعدة أخرى. المحدّد من نوع class أو type المتداخل يُربَط كـ سليل للأب (combinator المسافة) ما لم تصرّح بغير ذلك عبر &:

Card styles nested under one parent

css

.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);

.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}

.body {
color: var(--muted, #444);
line-height: 1.5;
}
}

المتصفّح يوسّع هذا إلى .card .title و.card .body. ما زلت تحصل على محدّدات سليلة عادية — التداخل سكر لـ البنية والمحلية، لا نموذج مطابقة جديد.

محدّد الأب `&`

استخدم & حين يجب أن تلتصق القاعدة المتداخلة بـ نفس العنصر الذي للأب — شبه-classes، شبه-elements، أو class إضافي على الأب:

Hover and modifier on the same element

css

.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;

&:hover {
background: var(--brand-hover, #1d4ed8);
}

&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}

&.is-primary {
background: var(--brand-strong, #1e40af);
}
}

&:hover تعني .button:hover. &.is-primary تعني .button.is-primary. بدون &، :hover { } عارٍ غير صالح في nesting الأصلي — الـ & يجعل الالتصاق صريحاً.

الـ combinators مع `&`

ضع الـ combinator بعد & حين تريد ابناً مباشراً أو شقيقاً أو رابطاً صريحاً آخر — لا مسافة السليل العادية:

Child and adjacent patterns with &

css

.nav {
display: flex;
gap: 0.75rem;

& > .item {
padding: 0.35rem 0.6rem;
}

& > .item + .item {
border-inline-start: 1px solid #ddd;
}

/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}

& > .item ← .nav > .item. و.badge متداخل بدون & ← .nav .badge. اختر بوعي: السلائل العميقة بالصدفة رائحة nesting شائعة.

تداخل `@media` مع المكوّن

يمكنك تداخل at-rules مثل @media داخل قاعدة style حتى تعيش نقاط التوقّف بجانب المكوّن الذي تغيّره:

Responsive tweaks beside the component

css

.hero {
padding: 2rem 1.25rem;

h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

@media (min-width: 48rem) {
padding: 3rem 2rem;

h1 {
max-width: 20ch;
}
}
}

بعد التوسيع، ما زال استعلام الوسائط يغلّف التصريحات التابعة لـ .hero (و.hero h1). اربط هذا بالـ tokens وclamp() من دروس Modern Toolkit السابقة — التداخل ينقل القواعد فقط.

أنماط التداخل بنظرة سريعة

📊 مرجع سريع للتداخل الأصلي

تكتب	المعنى	استخدمه عندما
`.card { .title { } }`	`.card .title`	تنسيق سليل تحت المكوّن
`.btn { &:hover { } }`	`.btn:hover`	شبه-class على نفس العنصر
`.btn { &.big { } }`	`.btn.big`	class إضافي على نفس العنصر
`.nav { & > a { } }`	`.nav > a`	combinator ابن مباشر صريح
`.box { @media (…) { } }`	media محدود بمحدّدات تلك القاعدة	إبقاء نقاط التوقّف مع المكوّن

أبقِ التداخل ضحلاً

مستويان أو ثلاثة عادةً يبقيان مقروءين. الأشجار الأعمق تعيد مشكلة «هرم المحدّد» التي واجهتها فرق Sass: فروقات صعبة، specificity أعلى، وأنماط لا تُفهم إلا داخل أب عملاق واحد. فضّل جذر مكوّن واضحاً (.card، .nav) وتداخل الحالات والأبناء القريبين — لا الصفحة كلّها.

حزمة مكوّن: tokens + nest + حالات

شريحة واقعية تربط آخر ثلاث أفكار من الـ toolkit دون تكرار درسي calc أو المتغيرات:

Panel with tokens, nested parts, and a state

css

.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;

.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}

.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}

&.is-compact {
--panel-pad: 0.5rem;
}

@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}

الـ tokens ما زالت خصائص مخصّصة؛ وcalc ما زال يشتق الفجوة؛ والتداخل يبقي heading وactions والوضع المضغوط وتعديل الشاشة الصغيرة في مكان واحد.

جرّب بنفسك

خذ قواعد مسطّحة .card {} و.card .title {} و.card .meta {} وأعد كتابتها بتداخل تحت .card.
أضف &:hover على .link حتى يتغيّر لون الرابط فقط (لا span متداخل).
تداخل @media (min-width: 40rem) داخل .sidebar لتوسيع الـ padding — وتأكّد في DevTools من المحدّدات الموسَّعة.
حوّل :hover { } متداخلاً بالخطأ (بدون &) إلى &:hover { } ولاحظ أنه يصبح صالحاً.
قلّص تداخلاً فوضوياً من ثلاثة مستويات إلى اثنين بترقية كتلة داخلية إلى class خاص بها.

أخطاء شائعة

كتابة :hover { } متداخل بدون & — غير صالح أو ليس ما قصدت؛ استخدم &:hover
توقّع أن .child العاري يعني .parent.child — ذلك يحتاج &.child
نسخ حيل Sass مثل &__element لـ BEM بلا تفكير — التداخل الأصلي يتبع قواعد محدّد CSS
التداخل خمس مستويات «لأننا نستطيع» — القراءة وspecificity تتضرّران
الاعتقاد أن التداخل يستبدل var() أو calc() — هو فقط يجمع المحدّدات وat-rules

ملخّص

تداخل محدّدات الأبناء لإبقاء أنماط المكوّن محلية؛ تتوسّع إلى سلائل افتراضياً
استخدم & لحالات نفس العنصر (:hover، .is-active) وللـ combinators الصريحة
تداخل @media بجانب المكوّن الذي تضبطه
أبقِ التداخل ضحلاً؛ nesting بنية، لا ميزة توكن أو رياضيات
التالي في Modern Toolkit: container queries — تنسيق من حجم الأب، لا من الـ viewport فقط

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة