اتفاقية تسمية BEM CSS

ما هو BEM؟

BEM يرمز إلى Block وElement وModifier — اتفاقية تسمية تجعل فئات CSS ذاتية التفسير وبدون تعارضات.

البنية

.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }

مثال

<style>
.card { }
.card__title { font-size: 18px; }
.card__content { padding: 15px; }
.card--highlighted { border: 2px solid gold; }
</style>
<div class="card card--highlighted">
  <h3 class="card__title">عنوان</h3>
  <div class="card__content">محتوى</div>
</div>

لماذا BEM؟

❓ أسئلة شائعة

📖 ملخص

• BEM هو واحدة من أفضل اتفاقيات تسمية CSS
• من خلال بنية Block و Element و Modifier، تصبح فئات CSS ذاتية التفسير وبدون تعارضات وقابلة للصيانة
• BEM لا يتطلب مُحددات متداخلة — كل فئة مستقلة، تتجنب حروب التفصيل
• أياً كانت الاتفاقية التي تختارها، اتساق الفريق هو الأهم

📝 تمارين

1. أنشئ مكوّن "تعليق مستخدم" باستخدام تسمية BEM: صورة رمزية، اسم مستخدم، وقت، نص تعليق، زر إعجاب.
2. أعد كتابة هذا CSS بنمط BEM:

.profile { ... }
.profile .photo { ... }
.profile .info { ... }
.profile .info .name { ... }
.profile .actions .btn { ... }

3. فكّر في تقديم تسمية BEM في مشروعك — تدرب على مodule صغير في صفحة واحدة.