مقارنة 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&nbsp;12 في Laravel&nbsp;12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS &ndash; 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 دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت &mdash; كله CSS بحت. 1. التلات مكونات بتوع...

The Ultimate Managed Hosting Platform