منهجية BEM كمثال على الملصقات في opencart

بما أنني أفضل منهجية BEM ، عندما بدأت العمل مع opencart ، واجهت على الفور أشياء فظيعة بالنسبة لي ، فهذه هي محددات متداخلة. هم في كل مكان! بدءًا من القالب الافتراضي ، ينتهي بكافة الوحدات النمطية وقوالب حقوق الطبع والنشر تقريبًا. لماذا هذا أعتقد أن هناك عدة أسباب:

1. تم تصميم Opencart افتراضيًا على محددات متداخلة ، كل من القالب ولوحة المسؤول.
2. معظم المطورين الذين يعملون مع opencart هم مطورو خلفية ، لقد اختاروا هذا النهج للتو
3. هناك عدد من الفئات الضرورية والمعرّف الذي ترتبط به كل من وظيفة opencart القياسية ووحدات المؤلف ، وجميع مطوري الخلفية ، وأتباعهم ، لأسباب مختلفة ، لا يريدون ببساطة تغيير أي شيء والانتقال إلى التدفق.

لا أريد بأي حال من الأحوال قول أي شيء سيء تجاه مطوري الواجهة الخلفية ، ولكن العديد منهم ضعفاء للغاية في المقدمة وحتى في التخطيط. تم تشكيل هذا الرأي على أساس التواصل معهم ، والتعاون ، وبشكل عام ، نشاطهم على منتديات opencart المواضيعية. أؤكد أنني أعني مكانة مطوري opencart.

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

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



الآن دعونا نلقي نظرة على العلامات والأساليب:



ماذا نرى:

1. يتم تضمين جميع الملصقات في كتلة الصورة .
2. على الرغم من حقيقة أن كتلة الصور مصممة منطقياً لتخزين صورة المنتج ، فإن جميع أنماط الملصقات مرتبطة بها ، والآن انظر إلى css بأكملها وخاصةً على التداخل في الأسطر الأخيرة:

/*sticker*/ .image { position: relative; } .image .corner_0, .image .corner_1, .image .corner_2, .image .corner_3 { height: 57px; width: 58px; position: absolute; z-index: 998; } .image .corner_0 { left: 0px; top: 0px; } .image .corner_1 { right: 0px; top: 0px; } .image .corner_2 { left: 0px; bottom: 0px; } .image .corner_3 { right: 0px; bottom: 0px; } .box-product .image .corner_0 img, .box-product .image .corner_1 img, .box-product .image .corner_2 img, .box-product .image .corner_3 img { border: none; padding: 0px; } .box .box-product .image .corner_0 img, .box .box-product .image .corner_1 img, .box .box-product .image .corner_2 img, .box .box-product .image .corner_3 img { width: 60%; } 

إذا بدا .image .corner_2 أقل قبولًا ، فإن .box .box-product .image .corner_2 img بالفعل لا يبدو متفائلاً للغاية ... بشكل عام ، يمكننا تخمين أنه في مكان ما سيكون لدينا .box-product دون أحد الوالدين .box و يتم استخدام بعض الأنماط ، ولكن في مكان ما مع الوالدين الآخرين ، ولكن هنا نواجه عددًا من المشكلات:

1. إذا تم نقل الملصقات خارج .image ، فسوف تسقط جميع الأنماط ، وإذا أخذنا .image معنا ووضعها في مكان آخر ، ثم طبّق .image أنماط عندما لا تكون هناك حاجة إليها.
2. إذا قمت بإعادة تسمية صورة فجأة ، وهذا ليس منطقياً مستودعًا للملصقات أو .box أو .box-product ، بل إنه أعلى من ذلك وبالتأكيد لا يقول أن الملصقات مرفقة بها ، فلن نحصل على النتيجة المتوقعة في أي من هذه الحالات .
3. ماذا لو أردنا وضع .image على قدم المساواة مع .box المنتج ؟ مرة أخرى ، سوف يحدث خطأ ما ...
4. هناك العديد من محددات التكرار التي يتغير فيها .corner_ # فقط ، وإذا غيرنا هذا التداخل فجأة أو كنا نريد نقل الشفرة إلى قالب آخر ، فسوف يتعين علينا تغييره في كل مكان ، وقد لا تزال هناك استعلامات للوسائط ، إنها مجرد مضيعة للوقت.
5. زيادة الخصوصية. هذه المشكلة تصبح ملحوظة دائمًا بعد فترة من الوقت وغالبًا ما تقع على أكتاف من لم ينشئوها ...

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

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



من الخارج ، حصلنا على نفس النتيجة ، لكن العلامات والأنماط أصبحت الآن مختلفة:

 /* stickers */ .stickers { position: relative; } .sticker { } .sticker_position_0 { position: absolute; left: 0px; top: 0px; } .sticker_position_1 { position: absolute; right: 0px; top: 0px; } .sticker_position_2 { position: absolute; left: 0px; bottom: 0px; } .sticker_position_3 { position: absolute; right: 0px; bottom: 0px; } .sticker__img { border: none; padding: 0; } 

كما قلت سابقًا ، يمكن أن تكون حاوية stickers إما وحدة مستقلة أو مزيجًا لأي وحدة في بطاقة المنتج. في هذه الحالة ، قمنا بخلطها مع كتلة .image بتقسيم مهامها.

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



ملاحظة:
يمكن أن يكون ستيكر كعنصر.

 <div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div> 

وكذلك كتلة مستقلة لوضع النقاط دون ملصقات السياق.

الآن بنقرة من الرسغ ، يمكنك وضع ملصقات في أي مكان. على سبيل المثال ، يمكنك إخراج العصي من الصورة والتطبيق على بطاقة المنتج بالكامل في حاوية المنتج:



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

لا تزال هناك مشكلة لم يتم حلها مع هؤلاء المختارين ، والتي نظرت إليها بالعينين في وقت مبكر:

 .box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....} 

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

 .box-product .sticker__img {...} .box .sticker__img {...} 

استنتاج

هذا جزء صغير جدًا من التعليمات البرمجية التي تجعل الكثير من المعنى.

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

شكراً لكل من قرأ حتى النهاية وآمل أن يكون مقالي مفيداً.