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

المدونة

React Native 0.80 وExecuTorch: بداية قوية للذكاء الاصطناعي المحلي في تطبيقات الموبايل

يوليو 28, 2025

🚀 الجديد في React Native 0.80 بالتفصيل الإصدار React Native 0.80 يعتبر نقطة تحول حقيقية في عالم تطوير تطبيقات الموبايل باستخدام React Native. التح...

Laravel 12.19: استخدام Attributes لتنظيم الـ Query Builder

يوليو 07, 2025

Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...

شرح مفصل لكل هوك في React

يوليو 01, 2025

🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

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

يوليو 16, 2025

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

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

يوليو 24, 2025

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