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

ما هو BEM؟

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

1. الكتلة: مكون مستقل له معنى في حد ذاته (على سبيل المثال، زر أو نموذج).
2. العنصر: جزء من الكتلة ليس له معنى في حد ذاته ويعتمد على الكتلة (على سبيل المثال، رمز زر).
3. المُعدِّل: نسخة مختلفة من كتلة أو عنصر (على سبيل المثال، زر بلون مختلف).

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

لماذا استخدام BEM؟

يساعدك استخدام BEM على تجنب الفوضى والارتباك في CSS. وله فوائد عديدة:

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

كيفية استخدام BEM: أمثلة

مثال 1: زر بسيط

لنبدأ بمجموعة الأزرار الأساسية ونرى كيف يعمل BEM.

HTML:

  Submit

CSS:

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

.button--primary {
  background-color: blue;
}

توضيح:

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

مثال 2: مكون البطاقة

الآن لنقم بإنشاء قالب بطاقة بعنوان ووصف (عناصر)، ونسخة صغيرة الحجم (معدل).

HTML:

  
Title
  
This is a description.

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

توضيح:

• البطاقة عبارة عن كتلة تمثل مكون البطاقة.
• Card__title وcard__description هي عناصر وأجزاء محددة من البطاقة.
• البطاقة--الصغيرة عبارة عن مُعدِّل، مما يقلل المساحة المتروكة للإصدار الأصغر من البطاقة.

إيجابيات وسلبيات BEM

الايجابيات:

1. منظمة ومتسقة: تساعد في الحفاظ على CSS الخاص بك نظيفًا وجيد التنظيم.
2. يتجنب تعارضات CSS: يقلل من خطر الأنماط من مكون واحد يؤثر على عنصر آخر.
3. قابلية إعادة الاستخدام: يمكن استخدام الكتل والعناصر في أماكن متعددة عبر المشروع.
4. سهل الصيانة: يجعل من السهل تحديث CSS وإدارته، حتى مع نمو مشروعك.

سلبيات:

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

لماذا BEM مهم؟

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

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

خاتمة

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

اتبعني لمزيد من التحديثات!

أتمنى أن تكون هذه المقالة مفيدة في فهم اصطلاحات تسمية CSS BEM. إذا كنت ترغب في البقاء على اطلاع دائم بالمزيد من المقالات مثل هذه، والنصائح، ورؤى تطوير الويب، فتأكد من متابعتي. لا تتردد في التواصل معنا إذا كان لديك أي أسئلة أو اقتراحات. أحب أن أسمع منك!