نموذج CSS BEM – دليل لكتابة CSS قابلة للتطوير والصيانة

في هذه المقالة، سنتعمق في منهجية BEM (Block, Element, Modifier)، وهي عبارة عن اصطلاح تسمية CSS شائع يساعدك على كتابة CSS نظيف ومنظم وقابل للصيانة للمشاريع الكبيرة. يضمن BEM أن يظل الكود الخاص بك قابلاً للتطوير مع نمو المشروع ويقلل من فرص تعارض الأنماط.

1. ما هو BEM؟

BEM تعني:

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

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

اتفاقية تسمية BEM:

.block {}
.block__element {}
.block--modifier {}

• البلوك: يمثل الحاوية الرئيسية.
• العنصر: يتبع اسم الكتلة، مفصولاً بشرطة سفلية مزدوجة (__).
• المعدل: يتبع اسم الكتلة أو العنصر، مفصولاً بواصلة مزدوجة (-).

2. تحديد الهيكل

دعونا نحلل بنية BEM بمثال.

مثال:

    
Home
        
About
        
Contact
    

في هذا المثال:

• الكتلة: .menu هي الكتلة الرئيسية التي تمثل قائمة التنقل.
• العنصر: .menu__list و.menu__item هما عنصران داخل الكتلة.
• المعدل: .menu__item--active هو معدل يشير إلى الحالة النشطة لعنصر القائمة.

3. الكتل في BEM

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

مثال:

.زر { الحشو: 10 بكسل 20 بكسل؛ لون الخلفية: #3498db؛ اللون: أبيض؛ الحدود: لا شيء؛ }

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

هنا، .button عبارة عن كتلة تحدد الأنماط لمكون الزر. يمكنك إعادة استخدام هذه الكتلة عبر أجزاء متعددة من موقع الويب الخاص بك.

4. العناصر في BEM

العنصر

هو جزء من كتلة ليس لها معنى مستقل. إنه مرتبط بالكتلة وموجود لأداء وظيفة مرتبطة بالكتلة.

مثال:

.button__icon { الهامش الأيمن: 10 بكسل؛ } .زر__التسمية { حجم الخط: 14 بكسل؛ }

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

هنا:

.button__icon هو عنصر داخل كتلة .button، ويمثل رمزًا في الزر.
.button__label هو عنصر آخر يمثل التسمية النصية للزر.

5. المعدلات في BEM

يمثل المُعدِّل

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

مثال:

.زر--أساسي { لون الخلفية: #2ecc71؛ } .زر--كبير { الحشو: 15 بكسل 30 بكسل؛ }

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

هنا:

.button--primary هو مُعدِّل يغير لون خلفية الزر.
.button--large هو معدّل آخر يعمل على زيادة حجم الزر.

يمكن أيضًا تطبيق المعدلات على العناصر:

.button__icon--صغير { العرض: 10 بكسل؛ الارتفاع: 10 بكسل؛ }

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

6. فوائد استخدام BEM

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

7. BEM قيد التنفيذ

دعونا نلقي نظرة على مثال أكثر اكتمالا يتضمن الكتل والعناصر والمعدلات:

HTML:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

CSS:

/* حاجز */ .بطاقة { الحدود: 1 بكسل الصلبة #ddd؛ الحشو: 20 بكسل؛ نصف قطر الحدود: 5 بكسل؛ } /* عناصر */ .card__header { الهامش السفلي: 15 بكسل؛ } .card__title { حجم الخط: 18 بكسل؛ اللون: #333؛ } .card__body { الهامش السفلي: 15 بكسل؛ } .card__نص { اللون: #666؛ } .card__footer { محاذاة النص: يمين؛ } /* المعدل */ .card__button--الابتدائي { لون الخلفية: #3498db؛ اللون: أبيض؛ }

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

في هذا المثال:

.card هي الكتلة التي تمثل مكون البطاقة بالكامل.
.card__header، .card__title، .card__body، و.card__footer هي عناصر داخل كتلة البطاقة.
.card__button--primary هو مُعدِّل يطبق النمط الأساسي على الزر الموجود داخل البطاقة.

8. الأخطاء الشائعة التي يجب تجنبها في BEM

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

خاتمة

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

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

---

تابعني على لينكدإن

ريدوي حسن