التداخل الأصلي وطبقات الـ Cascade

من SASS إلى CSS الأصلي

في الدرس السابق تعلّمت تداخل SASS (&:hover داخل .card { }) الذي يحتاج أداة بناء ليعمل. الخبر الجيد: CSS نفسه أصبح يدعم التداخل الآن، بلا أي معالج.

التداخل الأصلي (Native Nesting)

.card {
  padding: 16px;
  border-radius: 12px;

  h2 {
    font-size: 1.25rem;    /* لا حاجة لـ & هنا! */
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  }

  &.featured {
    border: 2px solid #7c5cff;
  }
}

متى تحتاج & ومتى لا؟

• لا تحتاجها لمحدّد نسل بسيط (وسم، صنف، معرّف يبدأ القاعدة المتداخلة): .card { h2 { } } تعني تلقائيًا "أي h2 داخل .card".
• تحتاجها عندما تُلحِق شيئًا بنفس العنصر الأب مباشرة، بلا مسافة: &:hover، &.featured، &::before.
• تحتاجها عندما يأتي الأب في غير أول الجملة: .dark & { color: white; } تعني "هذا العنصر داخل .dark".

.button {
  background: #7c5cff;

  & + & {              /* زر يلي زرًا آخر مباشرة */
    margin-inline-start: 8px;
  }

  .dark & {             /* هذا الزر داخل وضع dark */
    background: #a78bfa;
  }
}

🔑 التداخل الأصلي لا يحتاج بناءً ولا حزمة npm — يعمل في المتصفح مباشرة، وهو الفرق الجوهري عن SASS رغم تشابه الصياغة.

طبقات الـ Cascade: @layer

مشكلة قديمة: تستورد مكتبة (Reset، مكوّنات جاهزة)، وتحتاج بعدها كتابة أنماطك الخاصة — لكن ترتيب الأولوية (Specificity) يجعل الكتابة فوقها معركة مستمرة. @layer يحلّها بترتيب صريح لا علاقة له بالأولوية:

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.5; }
}

@layer components {
  .btn { padding: 8px 16px; border-radius: 8px; }
}

@layer utilities {
  .text-center { text-align: center; }
}

القاعدة الذهبية للطبقات

• ترتيب الإعلان الأول يحدّد الأولوية — الطبقة المُعلنة أخيرًا تفوز، بصرف النظر عن قوة المحدّد بداخلها.
• الأنماط خارج أي طبقة تفوز دائمًا على كل الطبقات — تُعامَل كأقوى طبقة ضمنية.
• طبقة utilities أعلاه تفوز حتى لو كان محدّد components أقوى تقنيًا — لأن utilities أُعلنت بعدها بسطر @layer reset, base, components, utilities;.

@layer base, override;

@layer override {
  .text { color: blue; }        /* تفوز */
}

@layer base {
  #main .text { color: red; }   /* أقوى محدّدًا لكن يخسر — الطبقة أسبق */
}

🔑 استخدم @layer عند دمج مكتبة خارجية مع أنماطك: ضع مكتبة الطرف الثالث بطبقة مبكرة، وأنماطك بطبقة متأخرة — تكتب بأبسط محدّد ممكن وتفوز دائمًا.

الأخطاء الشائعة

• ❌ ظن أن & مطلوبة دائمًا → لم تعد كذلك للنسل البسيط في المتصفحات الحديثة.
• ❌ نسيان أن الأنماط خارج أي @layer تتغلّب على كل الطبقات → إن وضعت شيئًا خارج الطبقات بالخطأ فسيتجاوز كل تنظيمك.
• ❌ الخلط بين ترتيب الطبقات وترتيب الأولوية العادي → داخل الطبقة نفسها، الأولوية والترتيب يعملان كالمعتاد؛ بين الطبقات، فقط ترتيب الإعلان يهم.

خلاصة

التداخل الأصلي يمنحك بنية SASS المألوفة بلا معالج (مع & فقط عند الإلحاق أو تغيير موضع الأب)، و@layer يمنحك تحكّمًا صريحًا بترتيب الأولوية بين مجموعات الأنماط — مثاليان معًا لتنظيم مشروع CSS كبير دون فوضى !important.