مقارنة 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 بتخلي كل الكلاسات عندها نفس المستوى.
- الطبقات بتسمحلك تتحكم بنفسك وتتفادى مشاكل التعارض بسهولة.
المدونة
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...
يوليو 13, 2025
في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...
يوليو 20, 2025
دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
يوليو 27, 2025
🔍 ما هي Array.fromAsync() بالضبط؟ Array.fromAsync() هي دالة static من كائن Array، شبيهة بالدالة Array.from()، لكن الفرق الجوهري هو أن Array.fromAs...
يوليو 07, 2025
إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...
