مريحة BEM

تحية طيبة. في هذه المقالة سأخبرك كيف يمكنك تغيير BEM ، والاحتفاظ بأفضل ميزاته والتخلص من الأسوأ.

أولاً ، دعنا نتحدث عن ما هو الخطأ في BEM؟ ربما لا شيء يحتاج إلى تغيير وكل شيء جيد جدا؟

BEM هي منهجية تسمح لك باستخدام CSS / HTML / JS عدة مرات. إنها تقدم مفاهيم الكتلة والعنصر والمعدل والمزيج. عند البدء في استخدامه ، أنت تدرك أن هذا هو بالضبط ما كنت تنتظره لسنوات عديدة ، إنه مريح للغاية وواضح وجمال! ولكن بعد مرور بعض الوقت ، تبدأ مثل هذه اللحظات في التطور التي يمكن حلها بمساعدة BEM ، ولكن هذا لا يجلب أي متعة أو الأهم من ذلك. عن ماذا أتحدث؟ دعنا نذهب من خلال هذه النقاط:

1. كتل المتاح والبنود

هذه المشكلة أزعجتني لدرجة أنني أجبرت على كتابة هذا المقال.

يشير مفهوم الكتلة إلى كيان يمكن وينبغي إعادة استخدامه ، ولكن في الممارسة العملية ، يتم إنشاء عدد كبير من الكتل التي يتم تطبيقها مرة واحدة.

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



ماذا سنفعل وفقا ل BEM؟ هناك العديد من الخيارات:

1. قم بإنشاء كتلة نموذج وعناصرها: العنوان والزر وحقل النص
2. قم بإنشاء كتل منفصلة لكل مكون (الزر ، مربع النص ، العنوان) ، وكذلك للنموذج
3. ...

مهما اخترنا ، سيكون لدينا مشكلة: كيفية تعيين المسافة البادئة بين كل هذه الكتل؟

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

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

تنشئ هذه المشكلة كتل / عناصر لمرة واحدة ، بالإضافة إلى معدّلات نوع ___size_ أو ___place_---- البادئة) ، والتي ، كما قيل بالفعل ، يتم استخدامها مرة واحدة وفوضى كل من ملفات الترميز ___size_ ___place_---- الخاصة والملفات.

الأمر نفسه لا ينطبق فقط على المسافة البادئة ، ولكن أيضًا على حظر الأحجام (للأزرار ، على سبيل المثال ، يؤدي هذا غالبًا إلى تغيير في line-height الخطوط) ، وأحجام الخطوط ، والمسافة البادئة ، إلخ.

2. أسماء الطبقة الطويلة

ليس هناك الكثير لنتحدث عنه. لا أعتقد أن أي شخص يحب الترميز الذي يبدو مثل هذا:

 <header class="section-header section-header_margin_select-sector"> <h2 class="section-header__title font font_face_calibri-bold section-header__title_size_select-sectors"> Select a sector, please: </h2> </header> 

3. القيم الافتراضية أو الموضوعات كتلة

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

ولكن مع هذا النهج ، سوف تتحول الأمور التالية:

 <input type="text" class="textbox textbox_theme_P2"> <button class="button button_theme_P2">Reset</button> <button class="button button_theme_P2">Submit</button> <button class="button button_theme_P2">Save as draft</button> 

هذا فوضى في الكود ، وهو أمر سيء.

أنت تنتقد - العرض

ماذا أقترح لتصحيح هذا الخزي؟ أقترح البيان التالي ، والذي هو في الأساس إضافة إلى BEM القياسية.

بيان - تحسين BEM

A.1 طبقة من الوحدات وطبقة الصفحة

أقترح تقسيم النمط إلى جزأين:

الجزء الأول هو طبقة المكونات. تتم كتابة هذا الجزء وفقًا لجميع قواعد BEM (تقريبًا *). يقوم بتعيين أنماط للكتل القابلة لإعادة الاستخدام ، أو بالأحرى للمكونات ، على سبيل المثال ، للزر أو حقل النص أو العنوان ، إلخ.

الجزء الآخر هو طبقة الصفحة. يجب تعيين أنماط الكتل وعناصر صفحة معينة. وفقًا لذلك ، سيتم استخدام هذه الكتل / العناصر مرة واحدة (على أي حال ، في صفحة واحدة). قواعد BEM لا تنطبق هنا. يبدو مثل هذا:

الملف: index.css

 .___send-button { margin-bottom: 2px; font-size: 13px; } .___message-textarea { width: 240px; height: 300px; font-size: 14px; } 

اسم ملف تخطيط الصفحة اختياري. الشيء الرئيسي هو أنه يطابق جوهر الصفحة. تبدأ كل الأنماط بـ "___" بحيث لا يمكن الخلط بينها وبين فئات كيان BEM القياسية. أيضًا ، لا ترتبط الفئات بكيانات BEM - تعكس أسمائها فقط ما يجب تطبيقها عليه. تجدر الإشارة أيضًا إلى أن جميع أنماط تخطيط الصفحة موجودة في ملف واحد ، من حيث صلتها بصفحة واحدة.

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

من المنطقي أيضًا فصل المكونات وتخطيطات الصفحات على مستوى الدليل.

* باستثناء القواعد التي تم إلغاؤها وفقًا للفقرات التالية من البيان.

A.2 أسماء فئة طويلة

(تجريبي ، لذلك العنصر اختياري *)

يُقترح استبدال جزء من نظام التسمية القياسي بما يلي:

للكتلة: class="" (بدون تغيير)
بالنسبة للكتلة التي بها معدل: class=" _" (الوصول عبر المحدد المدمج. .._ )
لعنصر: class="__" (بدون تغيير)
بالنسبة لعنصر يحتوي على معدل: class="__ _" (الوصول من خلال .__._ )

يسمح لك هذا العنصر بالحصول على رمز قصير بخصوص المعدلات. من الواضح ، لا يمكن فعل الشيء نفسه مع العناصر.

من المهم ألا تحتوي الملفات ذات الأنماط على قواعد محددة للواقيات التي تتكون فقط من المعدلات:

 /*!!!*/ ._active { background-color: #abcdef; } 

* يمكن أن تؤدي تسمية مماثلة للمعدلات إلى مشاكل في الكتل / العناصر المختلطة مع الكتل / العناصر الأخرى ، شريطة أن يكون لكلا الكيانين نفس المعدل. وهذا هو ، من خلال تعيين معدل لكيان واحد ، وضعناها لكل شخص مختلط بهذه العقدة.

3.A الافتراضات والمواضيع

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

ملف - button/button.css

 .button { cursor: pointer; display: inline-block; } 

ملف - button/_theme/button_theme_P2.css

 .button_theme_P2, .button { border-radius: 3px; border: 1px solid #f00; } 

أو وفقا للفقرة 2

 .button._theme_P2, .button { border-radius: 3px; border: 1px solid #f00; } 

وبالتالي ، يصبح هذا الموضوع قياسيًا ، لكن يمكنك استخدامه مباشرةً إذا كنت ترغب في ذلك.

ملخص

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

ملاحظة: إذا كنت تقوم الآن بالتمرير بغض النظر عن الصفحة بأكملها لوضع ناقص ، فلا تنسَ أن تكتب تعليقًا ، وإلا فلن يجلب ناقصك أي فائدة ( وكذلك البيان ).