مقارنة 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 بتخلي كل الكلاسات عندها نفس المستوى.
- الطبقات بتسمحلك تتحكم بنفسك وتتفادى مشاكل التعارض بسهولة.
المدونة
يونيو 17, 2025
تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...
يوليو 30, 2025
لماذا السرعة ليست رفاهية؟ في زمن الضغط والسرعة، ما فيش حد عنده وقت يستنى موقع يحمّل! المستخدمين على الموبايل بينسحبوا من الموقع إذا ما فتحش في أق...
فبراير 05, 2026
شرح تحديث Redux Toolkit 2.9.0 إصدار Redux Toolkit 2.9.0 ركّز بشكل أساسي على تحسين أداء RTK Query، وتنظيم طريقة التعامل مع الطلبات غير المتزامنة (...
يونيو 30, 2025
📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
يونيو 03, 2025
لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...