مقارنة 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 بـ Introspect

يوليو 01, 2025

حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev‪، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...

تعزيز PHP Enums باستخدام archtechx/enums

يوليو 01, 2025

تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP&nbsp;8.1، ظهر نوع جديد اسمه &ldquo;enums&rdquo; بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...

استخدام useCallback في React: الفوائد، القيود، والممارسات المثالية

يوليو 31, 2025

Hook useCallback في React يُستخدم لإنشاء نسخة ثابتة من دالة (callback) بحيث لا يُعاد إنشاؤها إلا إذا تغيرت الـ dependencies المحددة. الهدف الأساسي م...

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

يوليو 28, 2025

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

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

وقّف نسخ الكود! اتعلم تستخدم Traits في Laravel صح

يوليو 01, 2025

🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...