منهجية BEM: Block وElement وModifier
سمِّ فئات CSS وفق النمط Block__Element--Modifier لإنشاء تنسيقات مكوّنات موثّقة ذاتيًا ومنخفضة الخصوصية وقابلة لإعادة الاستخدام.
منهجية BEM: Block وElement وModifier درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي BEM؟
BEM (الكتلة والعنصر والمعدِّل) هو اصطلاح لتسمية CSS يجعل الأنماط متوقعة وقابلة لإعادة الاستخدام وخالية من التعارضات. ومن خلال تضمين بنية المكوّن في أسماء الأصناف، يلغي هذا الاصطلاح صراعات درجة التحديد والتصادمات العرضية بين الأنماط.
الكتل — مكوّنات مستقلة
الكتلة مكوّن مستقل قابل لإعادة الاستخدام، مثل: card وbutton وnav. ويكون اسم الصنف هو اسم الكتلة، مكتوبًا بأحرف صغيرة تفصل بينها وُصلات.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>العناصر — أجزاء الكتلة
العنصر جزء من كتلة لا يكون له معنى بمفرده. استخدم شرطتين سفليتين: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>المعدِّلات — الأنواع والحالات
يغيّر المعدِّل مظهر الكتلة أو العنصر أو سلوكه. استخدم شرطتين: block--modifier أو block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>قواعد BEM في CSS
تتمتع أصناف BEM بدرجة تحديد منخفضة ومتساوية، إذ يحتوي كل محدد على صنف واحد. وهذا يجعل تجاوز الأنماط سهلًا. لا تستخدم المعرّفات أو محددات العناصر المتداخلة مطلقًا، لأنها تزيد درجة التحديد بطريقة يصعب توقعها.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM مع Sass
يجعل محدد الأصل & في Sass كتابة BEM أقل إسهابًا. وتكون CSS المجمّعة مطابقة لـ BEM العادية.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}متى تنشئ كتلة جديدة
أنشئ كتلة جديدة عندما يستطيع المكوّن العمل مستقلًا وإعادة استخدامه في سياقات مختلفة. وأنشئ عنصرًا عندما لا يكون للجزء معنى إلا داخل كتلة محددة واحدة.
تتجنب BEM التداخل
لا تشجّع BEM على التداخل العميق في HTML وCSS. فالعنصر الموجود داخل عنصر آخر يظل block__element، وليس block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM وJavaScript
استخدم صنفًا منفصلًا خاصًا بـ JS لخطافات السلوك، مع البادئة js-. يفصل ذلك بين التنسيق والبرمجة النصية، لذا لن تؤدي إعادة تسمية صنف BEM إلى تعطيل سلوك JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);مزج كتل BEM
يمكن أن يمتلك العنصر الواحد عدة أصناف للكتل، ما يتيح تنسيقًا خاصًا بالسياق دون ربط الكتل ببعضها.
<button class="btn btn--primary form__submit">Submit</button>قيود BEM
قد تصبح أسماء الأصناف طويلة. تعمل BEM بأفضل صورة مع الفرق الكبيرة وأنظمة التصميم التي يكون فيها اتساق الأنماط العامة مهمًا. أما في أُطر المكوّنات مثل React وVue، التي توفر أنماطًا محددة النطاق، فتكون فوائد مساحة أسماء BEM أقل أهمية.
تحقق سريع
في BEM، ماذا يمثّل card__title--truncated؟
مراجعة: BEM
الكتلة: مكوّن مستقل. العنصر (شرطتان سفليتان __): جزء من كتلة. المعدِّل (شرطتان --): نوع أو حالة. درجة تحديد منخفضة ومتساوية. تجنّب محددات المعرّفات والتداخل العميق. استخدم البادئة js- لخطافات JavaScript. يجعل Sass & كتابة BEM أقل إسهابًا. وهي مناسبة جدًا للفرق الكبيرة وأنظمة التصميم.
الأسئلة الشائعة
هل درس «منهجية BEM: Block وElement وModifier» مجاني؟
نعم — نص درس «منهجية BEM: Block وElement وModifier» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «منهجية BEM: Block وElement وModifier»؟
سمِّ فئات CSS وفق النمط Block__Element--Modifier لإنشاء تنسيقات مكوّنات موثّقة ذاتيًا ومنخفضة الخصوصية وقابلة لإعادة الاستخدام. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «منهجية BEM: Block وElement وModifier»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- منهجية BEM: Block وElement وModifier
- وحدات CSS: أسماء الفئات ذات النطاق المحدد
- CSS-in-JS: Styled-components وEmotion
- نهج Tailwind CSS القائم على الأدوات أولًا