مقارنة 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 وMongoDB
يونيو 30, 2025
📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...
React Native 0.80 وExecuTorch: بداية قوية للذكاء الاصطناعي المحلي في تطبيقات الموبايل
يوليو 28, 2025
🚀 الجديد في React Native 0.80 بالتفصيل الإصدار React Native 0.80 يعتبر نقطة تحول حقيقية في عالم تطوير تطبيقات الموبايل باستخدام React Native. التح...
إزاي OAuth بيشتغل
يونيو 29, 2025
إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...
شرح مفصل لكل هوك في React
يوليو 01, 2025
🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...
دليل للأنيميشن المتحركة بالسكّول بس بـ CSS
يونيو 26, 2025
دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...
مقارنة CSS: طبقات vs BEM vs Utility Classes
يونيو 26, 2025
مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وك...
