مقارنة CSS: طبقات vs BEM vs Utility Classes
يونيو 26, 2025مقارنة CSS: Cascade Layers و BEM و Utility Classes
المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وكمان دعم @layer الأصلي.
BEM: تحديد واضح
بـ BEM بنسّيّم الكلاسات بطريقة بتخلى specificity ثابتة:
.header__nav-item--active { color: blue; }Utility Classes: نتجنب التعقيد
الكلاسات بتبقى atomic، كل واحدة specificity واحدة:
<button class="bg-red-300 hover:bg-red-500 text-white py-2 px-4 rounded">
زرار
</button>Cascade Layers: تحديد محترف
الـ @layer بيخلّي ترتيب الطبقات هو المسيطر، مش قوة السيلكتور:
@layer components {
.nav-link.active { color: blue; }
}ده بيحميك من مشاكل التعارض بدون ما تستخدم !important.
ليه ده مهم؟
- لو مفيش تنظيم: inline > ID > class > tag، وده ممكن يخرب ستايلات كبيرة.
- الـ utility‑first بتخلي كل الكلاسات عندها نفس المستوى.
- الطبقات بتسمحلك تتحكم بنفسك وتتفادى مشاكل التعارض بسهولة.
المدونة
يوليو 13, 2025
في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...
فبراير 05, 2026
شرح تحديث Redux Toolkit 2.9.0 إصدار Redux Toolkit 2.9.0 ركّز بشكل أساسي على تحسين أداء RTK Query، وتنظيم طريقة التعامل مع الطلبات غير المتزامنة (...
أغسطس 09, 2025
البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...
يوليو 24, 2025
🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...
يوليو 07, 2025
إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...
أغسطس 06, 2025
عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...