مقارنة 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 بتخلي كل الكلاسات عندها نفس المستوى.
- الطبقات بتسمحلك تتحكم بنفسك وتتفادى مشاكل التعارض بسهولة.
المدونة
إتقان التحقق الشرطي في Laravel 12
يوليو 07, 2025
إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...
مقارنة CSS: طبقات vs BEM vs Utility Classes
يونيو 26, 2025
مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وك...
إزاي OAuth بيشتغل
يونيو 29, 2025
إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...
توليد تقارير بكفاءة مع كاش وزمن ثابت واستخدام الـ Job Queues
يوليو 07, 2025
إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...
الدليل الكامل لتحديثات ECMAScript 2025 للمطورين
يوليو 06, 2025
📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...
دليل للأنيميشن المتحركة بالسكّول بس بـ CSS
يونيو 26, 2025
دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...
