مقارنة 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 بتخلي كل الكلاسات عندها نفس المستوى.
  • الطبقات بتسمحلك تتحكم بنفسك وتتفادى مشاكل التعارض بسهولة.

المدونة

البرمجة الكائنية (OOP) – المفاهيم الأساسية

أغسطس 09, 2025

البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية

يوليو 16, 2025

🌐 إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية CSS دلوقتي بقت أذكى بكتير. دالة if()، وميزة popover="hint"، وازاي نكتب تنسيقات متج...

نظام طوابير Laravel واستخدام Supervisor في الإنتاج

يوليو 01, 2025

🚀 نظام Queue &amp; Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...

Notifire + FCM مع Laravel

سبتمبر 13, 2025

لو محتاج تبعت إشعارات Push من تطبيق Laravel سواء للموبايل أو للويب، فالحل الأسرع والأبسط هو إنك تستخدم Notifire اللي بيربط Laravel مباشرةً مع Fireba...

استدعاء ملفات JavaScript عند الحاجة فقط لتحسين أداء موقعك

يوليو 24, 2025

🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...