ما هو BEM (Block ، Element ، Modifier) ​​وكيف يمكن استخدامه مع Drupal Emulsify Twig

نشرت: 2022-11-08

عند العمل باستخدام تقنيات وبرامج مفتوحة المصدر ، من المهم جدًا تبسيط الجهد المطلوب لقراءة وفهم التعليمات البرمجية الخاصة بك. يساعدك اصطلاح التسمية الجيد في حل المشكلات الأكبر بدلاً من التركيز على بناء الجملة وتفضيلات النمط أثناء مراجعات التعليمات البرمجية. يدرك المطورون المتمرسون أهمية التعليمات البرمجية جيدة التنظيم والمنظمة عند العمل مع مواقع الويب الكبيرة التي تحتوي على الكثير من عناصر النمط.

منهجية BEM (Block ، Element ، Modifier) ​​هي عبارة عن اصطلاح تسمية مستخدم على نطاق واسع لفئات CSS التي تكتسب شعبية بسبب سهولة الاستخدام التي توفرها. المفهوم الأساسي لـ BEM هو تطوير الويب القائم على المكونات. يجعل BEM تطوير الواجهة أمرًا سهلاً وسريعًا ، خاصةً عند التعامل مع مشاريع كبيرة باستخدام واجهة مستخدم معقدة. دعنا نستكشف المزيد عن BEM وكيف يمكن أن تعمل مع وحدة Drupal Emulsify Twig.

ما هو BEM

تم تقديم منهجية BEM للمساعدة في تسهيل الوصول إلى فئات CSS وفهمها وتوسيع نطاقها. يمكنه تسريع عملية التطوير ويساعد في بناء مكونات قابلة لإعادة الاستخدام.

يتضمن BEM ثلاثة أجزاء:

  1. حاجز
  2. عنصر
  3. المعدل

حاجز

الكتل هي المكون الخارجي والمستقل وظيفيًا ويمكن إعادة استخدامها. أمثلة: رأس ، تذييل ، شريط جانبي ، قائمة ، محتوى ، إلخ.

سمات:

  • يجب أن تعكس أسماء الكتل دائمًا الغرض من الكتلة.
  • يجب ألا تستخدم الكتل الهامش أو المركز. إذا كنت بحاجة إلى إضافة هامش أو مركز ، فأنت بحاجة إلى تطبيقه على الحاويات الداخلية.
  • لا تستخدم علامات CSS أو محددات المعرفات عند استخدام BEM.

مثال:

 <div class=”icon-button”></div>

عنصر

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

سمات:

  • يجب أن يصف اسم العنصر (الفئة) الغرض منه (العنوان ، التسمية التوضيحية) وليس حالته (صغير / أحمر).
  • يتم فصل العنصر والكتلة بشرطة سفلية مزدوجة (__). مثل هذا: block-name__element-name.

مثال:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

المعدل

اسم فئة يمكنك من خلاله تحديد مظهر أو حالة أو سلوك كتلة أو عنصر. أمثلة: أحمر ، كبير ، معطل ، ثابت ، إلخ.

سمات:

  • يصف اسم المعدل مظهره. على سبيل المثال ، إذا كان المظهر "_large" ، فستكون فئة المُعدِّل كـ icon-button__title_large .
  • يتم فصل المُعدِّل عن الكتلة أو العنصر بشرطة سفلية واحدة (_).

مثال:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

أنواع المعدلات

1. قيمة منطقية

يمكنك التحقق من حالة القيمة المنطقية وتعيينها في متغير. يمكن أن يمر هذا المتغير كقيمة معدلة.

2. مفتاح القيمة

سيتبع هيكل الاسم الكامل للمُعدِّل مع قيمة المفتاح أحد هذه الأنماط:

  1. block-name_modifier-name_modifier- القيمة
  2. block-name__element-name_modifier-name_modifier- القيمة

اصطلاحات التسمية: القواعد والمخططات

هناك مخططات تسمية مختلفة. جميع الأنظمة لديها بعض القواعد المشتركة مثل:

  • الأسماء مكتوبة بأحرف لاتينية صغيرة.
  • الكلمات مفصولة بشرطة (-).

1. مخططات التسمية الكلاسيكية

نظام التسمية الكلاسيكي هو مخطط التسمية الافتراضي لـ BEM.

اسم الكتلة__elem-name_mod-name_mod-val

  • يتم فصل اسم العنصر واسم الكتلة بشرطة سفلية مزدوجة (__).
  • يتم فصل اسم المعدل واسم الكتلة أو العنصر بشرطة سفلية واحدة (_).
  • يتم فصل قيمة المُعدِّل واسم المُعدِّل بشرطة سفلية واحدة (_).

2. أسلوب تسمية شرطين

block-name__elem-name - اسم الطراز - mod-val

  • يتم فصل العنصر واسم الكتلة بشرطة سفلية مزدوجة (__).
  • يتم فصل الكتلة والعنصر بواصلة مزدوجة (-).
  • يتم فصل قيمة المُعدِّل والمُعدِّل بواصلة مزدوجة (-).

3. أسلوب تسمية حالة الجمل

blockName-elemName_modName_modVal

  • تبدأ كل كلمة بعد الكلمة الأولى بحرف كبير.
  • يتم استخدام الكتل والعناصر والمعدِّلات بنفس الطريقة المستخدمة في نظام التسمية القياسي.

4. أسلوب تسمية رد الفعل

BlockName-ElemName_modName_modVal

  • يبدأ اسم الكتلة وأسماء العناصر بحرف كبير.
  • يبدأ اسم المعدل بحرف صغير.
  • يتم فصل اسم العنصر واسم الكتلة بواصلة واحدة (-).
  • يتم فصل أسماء وقيم المعدلات بنفس الطريقة كما في المخطط القياسي.

BEM في دروبال مع وحدة مستحلب غصين

في دروبال ، يمكننا استخدام وظيفة BEM Twig بمساعدة وحدة Emulsify Twig. تتيح لك وظيفة BEM إنشاء فئات BEM على عناصر في المكونات. المذكورة أدناه هي بعض ملحقات BEM Twig واستخدامها.

1. اسم كتلة بسيط (وسيطة مطلوبة):

<div {{bem ('icon')}}>

هذا يصنع:

<div class = "icon">

2. الحظر باستخدام المُعدِّلات:

إذا كنت تريد إضافة مُعدِّلات متعددة ، فيمكنك القيام بذلك باستخدام مصفوفة.

<div {{bem ('icon'، ['small'، 'red'])}}>

هذا يصنع:

<div class = "icon icon -– small icon -– red">

3. عنصر ذو مُعدِّلات واسم blockname (اختياري):

<div {{bem ('icon'، ['small'، 'red']، 'icon-button')}}>

هذا يصنع:

<div class = "icon-button__icon icon-button__icon - small icon-button__icon - red">

4. عنصر به اسم block ، ولكن لا يحتوي على مُعدِّلات (اختياري):

<div {{bem ('icon'، ''، 'icon-button')}}>

هذا يصنع:

<div class = "icon-button__icon">

5. عنصر مع blockname والمعدِّلات والفئات الإضافية:

<div {{bem ('icon'، ['small'، 'red']، 'icon-button'، ['js-click'، 'something-else'])}}>

هذا يصنع:

<div class = "icon-button__icon icon-button__icon - small icon-button__icon - red js-click something-else">

6. عنصر مع فئات إضافية فقط (اختياري):

<div {{bem ('icon'، ''، ''، ['js-click'])}}>

هذا يصنع:

<div class = "icon js-click">

إضافة ملحق غصين السمات

تتيح لك وظيفة إضافة سمات Twig إضافة سمات HTML إلى عناصر المكونات الخاصة بك. ألق نظرة على بعض وظائف إضافة السمات أدناه:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

افكار اخيرة

تعتبر منهجية BEM مفيدة للغاية للمطورين الذين يرغبون في كتابة رمز بجودة أفضل والحفاظ عليه يسهل تسليمه وفهمه. كل عنصر له غرض يمكن التعرف عليه بسهولة من خلال اسمه ومن أي كتلة يأتي منه. عند استخدامه بشكل صحيح ، سترى أن استخدام BEM يمكن أن يعزز سرعة التطوير. إذا أعجبك ما قرأته ، فقم بالتسجيل في النشرة الإخبارية الأسبوعية حيث سنرسل لك نظرة ثاقبة جديدة ومثيرة للاهتمام مباشرة إلى صندوق الوارد الخاص بك!