طبقات الـ Cascade @layer

الصياغة

@layer reset, base, components, utilities;

@layer reset { * { margin: 0; padding: 0; } }
@layer components { .btn { padding: 8px 16px; } }
@layer utilities { .text-center { text-align: center; } }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  @layer base, override;
  @layer override { .text { color: #7c5cff; } }
  @layer base { #box .text { color: #dc2626; } }
</style>
<div id="box"><p class="text">بنفسجي رغم أن محدّد #box .text أقوى — الطبقة override أُعلنت بعد base.</p></div>

أهم القيم

💡 نصائح عملية

• أعلن ترتيب كل طبقاتك بسطر واحد في بداية الملف الرئيسي قبل استيراد أي شيء
• ضع مكتبات الطرف الثالث بطبقة مبكرة وأنماطك الخاصة بطبقة متأخرة — تكتب بأبسط محدّد وتفوز

⚠️ أخطاء شائعة

• نسيان أن الأنماط خارج أي طبقة تتغلّب على كل الطبقات — قد تكسر تنظيمك بالخطأ
• الخلط بين ترتيب الطبقات (يحكم بينها) والأولوية العادية (تحكم داخل نفس الطبقة فقط)

خصائص ذات صلة