CSS Academy · درس

‏BEM: تسمية الكتلة والعنصر والمعدِّل

طبّق منهجية Block-Element-Modifier لإنشاء أسماء أصناف متوقعة وقابلة لإعادة الاستخدام

‏BEM: تسمية الكتلة والعنصر والمعدِّل درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هي BEM؟

تُعد BEM (Block–Element–Modifier) اصطلاحًا للتسمية ينشئ أسماء فئات توضّح وظيفتها. وتجعل مكونات CSS قابلة للتنبؤ وموثقة ذاتيًا.

الكتلة

الكتلة مكوّن مستقل وذو دلالة في واجهة المستخدم، ويمكن أن يوجد بصورة مستقلة. وهي الفئة الجذرية للمكوّن.

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

العنصر

العنصر عنصر فرعي من كتلة، ولا يكون له معنى خارجها. وتستخدم العناصر شرطتين سفليتين: .block__element.

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

المعدِّل

المعدِّل هو تنويع أو حالة لكتلة أو عنصر. ويستخدم المعدِّلون شرطتين: .block--modifier.

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

مثال كامل على BEM

مكوّن بطاقة يستخدم تسمية BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

بنية CSS وفق BEM

CSS المقابلة لبطاقة BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

فائدة BEM في درجة التخصيص

تتكون فئات BEM كلها من فئة واحدة (درجة التخصيص 0,1,0). ولا يوجد محدد أكثر تخصيصًا من آخر، لذلك يصبح التجاوز مباشرًا؛ فما عليكم سوى إضافة فئة المعدِّل المناسبة.

أخطاء BEM الشائعة

تجنبوا أخطاء BEM التالية:

العناصر متعددة المستويات: .card__body__title — اختصروها إلى .card__title
استخدام العناصر خارج كتلتها في HTML
استخدام محددات العناصر مثل .nav__link a — فهذا يضيف درجة تخصيص غير ضرورية

BEM مع الخصائص المخصصة في CSS

تتوافق BEM ومتغيرات CSS طبيعيًا. عرّفوا رموزًا على مستوى الكتلة، ثم اجعلوا المعدِّلات تتجاوزها:

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

متى لا تستخدموا BEM؟

تتميز BEM بكونها وصفية، لكنها ليست مثالية لفئات الأدوات أو الأنماط المستخدمة لمرة واحدة. وتستبدل أطر النهج القائم على الأدوات، مثل Tailwind، BEM بالكامل. استخدموا BEM مع مكتبات المكونات المخصصة التي تهم فيها التسمية الدلالية.

BEM في التطبيق العملي

تستخدم العديد من أنظمة التصميم تنويعات من BEM أو مخططات تسمية مشابهة. ولا تهم الصياغة المحددة بقدر أهمية المبدأ المتسق: الكتلة → العنصر → المعدِّل، من دون تداخل عميق وبدرجة تخصيص مسطحة.

تحقق سريع

في BEM، ما الصياغة التي تمثل عنصرًا باسم "title" داخل كتلة باسم "card"؟

مراجعة

تستخدم BEM تسمية الكتلة والعنصر والمعدِّل: .block__element--modifier. وتتكون جميع الفئات من فئة واحدة لتحقيق درجة تخصيص مسطحة ومتساوية. تنتمي العناصر (__) إلى كتلتها. وينشئ المعدِّلون (--) تنويعات. تجنبوا التداخل العميق مثل .card__body__title، واختصروه إلى .card__title.

الأسئلة الشائعة

هل درس «‏BEM: تسمية الكتلة والعنصر والمعدِّل» مجاني؟

نعم — نص درس «‏BEM: تسمية الكتلة والعنصر والمعدِّل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏BEM: تسمية الكتلة والعنصر والمعدِّل»؟

طبّق منهجية Block-Element-Modifier لإنشاء أسماء أصناف متوقعة وقابلة لإعادة الاستخدام تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏BEM: تسمية الكتلة والعنصر والمعدِّل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy