تعرف على نظام تسمية BEM الخاص بلغة CSS

لنفهم المشكلة أولاً

تسمية الأشياء دائما صعبة في عالم البرمجة و في CSS بعض المطورين لا ينتبهون كثيرا للتسمية , إنهم يعترفون أنه لا يوجد وقت كافٍ للتفكير في أسماء الكلاسات.

قد يبدو هذا صحيحا، لكن على المدى البعيد يستهلك الكود منخفض الجودة وقتا أكثر.

لذا يوجد العديد من الطرق لحل مشكلة التسمية ، وواحدة منها تسمى BEM. في هذا المقال سنقوم بإلقاء نظرة عن قرب عن ماهية BEM وكيف تبني كود CSS متوافق كلياً مع قواعد BEM.

Block-Element-Modifier - BEM

BEM أو Block-Element-Modifier هي منهجية ونظام تسمية ومجموعة من الأدوات المرتبطة ببعضها. تم صنعها من قبل فريق Yandex & BEM تم تصميمها للتطوير السريع من قبل فرق التطوير الكبيرة. في هذا الجزء سنركز على المفهوم ونظام التسمية.

منهجية BEM تشجع المصممين والمطورين على التفكير في الموقع كمجموعة من المكونات القابلة لإعادة الاستخدام والتي يمكن خلطها ومطابقتها لعمل الواجهات. الـ block هو جزء من الوثيقة document مثل header, footer و sidebar. قد تشير block هنا إلى وسوم HTML التي تشكل الصفحة أو التطبيق.

قد تحتوي الـ blocks على blocks أخرى. على سبيل المثال، الـ header يحتوي أيضا على logo, navigation و حقول بحث، كما ترى بالأسفل. الـ footer قد يحتوي على خريطة الموقع.

العنصر element. كما يفسره BEM documentation:

العنصر هو جزء من الـ block يقوم بأداء وظيفة محددة. العناصر تعتمد على السياق: إنها منطقية فقط في سياق الـ block الذي تنتمي إليه.

حقل البحث على سبيل المثال، وهو block، يحتوي على عنصر حقل نصي وعنصر زر الإرسال، كما هو واضح في الصورة بالأسفل

الـ main content block في الناحية الأخرى قد يحتوي على قائمة من المقالات articles. تلك القائمة قد تحتوي على سلسلة من المقاطع الترويجية للمقال. وكل مقطع قد يحتوي على صورة، مقتطفات و عنصر "اقرأ المزيد" كماه و موضح بالأسفل.

يشكل الـ blocks و elements معا أساس منهجية تسمية BEM. وفقا لقواعد BEM:

- أسماء الـ block يجب أن تكون غير مكررة في المشروع

- أسماء الـ element يجب أن تكون غير مكررة داخل الـ block

- يجب أن يتم إضافة مُعَدِّل modifier إلى الأشكال المختلفة من الـ block.

أسماء الـ blocks و elements أحيانا يتم فصلهم بشرطتين سفليتين (.block__element). أسماء الـ block و element يتم فصلهم عن الـ modifier بشرطتين (.block--modifier أو .block__element--modifier).

نرى هنا كيف يبدو استخدام BEM في حقل بحث على سبيل المثال:

<form class="search">
  <div class="search__wrapper"> 
    <label for="s" class="search__label">Search for: </label> 
    <input type="text" id="s" class="search__input"> 
    <button type="submit" class="search__submit">Search</button> 
  </div>
</form>

إذا كان هناك شكل مختلف للحقل له خلفية سوداء فسيظهر الكود بهذا الشكل:

<form class="search search--inverse">
  <div class="search__wrapper search__wrapper--inverse">
    <label for="s" class="search__label search_label--inverse">Search for: </label>
    <input type="text" id="s" class="search__input search__input--inverse">
    <button type="submit" class="search__submit search__submit--inverse">Search</button>
  </div>
</form>

كود CSS الخاص بنا قد يبدو هكذا:

.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

سواء في HTML أو CSS، إن search--inverse و search__label--inverse مجرد أسماء كلاسات إضافية. إنهم ليسوا بديلا لـ search أو search__label. أسماء الكلاسات هي نوع المحددات الوحيد المستخدم في نظام BEM.

هناك العديد من المميزات لهذه المنهجية منها:

- من السهل للأعضاء الجدد في الفريق أن يقرأوا كود الـ HTML و CSS ويفهموا وظائفه.

- إضافة المزيد من المطورين يزيد من إنتاجية الفريق

- التسمية الثابتة تقلل من احتمالية حدوث تعارض من أسماء الكلاسات

- CSS مستقلة عن HTML

- CSS قابلة لإعادة الاستخدام بدرجة كبيرة

يوجد العديد من التفاصيل حول BEM من الصعب ذكرها كلها في مقال واحد. الموقع الخاص بـ BEM يوضح هذه المنهجية بتفصيل أكبر بكثير ويعرض أدوات وشروحات لكي تبدأ فيها. لكي تتعلم أكثر عن منهجية BEM يوج مصدر رائع هو Get BEM http://getbem.com/introduction