كيفية كتابة أفضل CSS مع BEM

هذه المدونة والفيديو خاصة للمطورين الذين يرغبون في تحسين CSS. من المهم جدًا أن يكون لديك CSS قابل للقراءة ، لزملائك في الفريق ونفسك.

سوف يساعدك أنت وفريقك في تطوير موقع الويب أو التطبيق في وقت لاحق.

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

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

إذا كنت أكثر من شخص تقرأه ، فالرجاء اتباع النص أدناه

ملاحظات الفيديو

مثال الموقع

في هذا المثال ، استخدمت سمة Bootstrap ، يمكنك تنزيل سمة Business مجانًا.

نص سامية

في هذا المحرر ، كنت أستخدم محرر نص سامية. يمكنك تنزيله مجانًا. إذا كنت ترغب في الحصول على مؤيد حقيقي باستخدام Sublime Text ، فيرجى الاطلاع على الدورة / كتاب صديقنا Wes Bos.

معلومات مفصلة BEM

إذا كنت ترغب في قراءة وثائق BEM ، يرجى التحقق من ذلك على موقع BEM.

في مقطع الفيديو الخاص بي ، عرضت مدونة تفصيلية حول BEM على موقع CSSwizardy.

دعنا ندخل الرمز!

الخطوة 1: HTML و CSS كيف تعلمنا ذلك

عندما تتعلم كتابة CSS ، سيكون الأمر شيئًا مشابهًا لهذا:

HTML

<الملاحة>
   

CSS

nav {
  الارتفاع: 60 بكسل ؛
  أقصى عرض: 1024 بكسل ؛
}

nav ul
  الهامش: 0
  الحشو: 0؛
  محاذاة النص: المركز ؛
}

nav ul li {
  عرض: مضمنة.
}

nav ul li a {
  عرض: كتلة مضمنة.
  الحشو:.
}

تحليل HTML و CSS

إذا قمت بتحليل HTML و CSS ، فسنرى ما يلي.

  • هيكل مع العناصر فقط
  • لا أسماء الفصل
  • محددات متعددة المستوى

مشاكل ستكتشفها عند كتابة HTML و CSS مثل هذا!

عندما بدأت مع Frontend Development ، كانت هذه هي الطريقة التي طُلب مني أن أكتبها.

ربما لن ترى المشكلة ، ولكن في نهاية هذه المدونة ، ستعرف ذلك بالتأكيد!

المشاكل التي ستكتشفها في هذا (في الفيديو ستراه):

  • إذا كنت ستستخدم نفس HTML في مكان آخر ، فستكون الأمور فوضوية إذا غيرتها هنا ، لأنها ستنعكس في كل مكان! لذلك ليست قابلة للتطوير.
  • للكتابة فوق التصميم ، سيكون عليك أن تكتب محددات محددة للغاية ذات مستويات متعددة أو حتى أكثر استخدامًا! من المهم الكتابة فوق.
  • سيؤدي ذلك إلى الكثير من الأخطاء مع ملفات CSS الكبيرة.
  • لا تحدد محددات CSS حيث يمكنك العثور على عناصر HTML في الصفحة. لذلك ليس شرح ذاتي.

الخطوة 2: تحسين HTML و CSS بشكل أفضل قليلاً

عندما كان لدي بضع سنوات من الخبرة في تطوير Frontend Development ، بدأ HTML و CSS يشبهني:

HTML

CSS

.التنقل {
  الارتفاع: 60 بكسل ؛
  أقصى عرض: 1024 بكسل ؛
}

.navigation ul {
  الهامش: 0
  الحشو: 0؛
  محاذاة النص: المركز ؛
}

.navigation li {
  عرض: مضمنة.
}

.navigation a {
  عرض: كتلة مضمنة.
  الحشو:.
}

تحليل HTML و CSS

إذا قمت بتحليل ملفات HTML و CSS المحسنة ، فسنرى ما يلي.

  • محددات CSS أقصر
  • يكون محددات CSS أقل تحديدًا
  • تحتوي محددات CSS على المزيد من السياق ، ولكن ليس السياق الذي يمكن أن يقدمه BEM.

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

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

الخطوة 3: استخدام BEM لكتابة HTML و CSS أفضل

عندما اكتشفت أن المتصفحات تقرأ محددات مختلفة عن البشر ، كان الأمر مثل "ماذا؟ هاه؟ ". كان هذا جديدًا جدًا بالنسبة لي! اكتشفت أن محددات CSS الخاصة بي لم تكن جيدة كما اعتقدت.

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

في هذا المثال ، يمكنك رؤية كيف سيبدو HTMl & CSS وفقًا لـ BEM.

HTML

CSS

.main-nav
  الارتفاع: 60 بكسل ؛
  أقصى عرض: 1024 بكسل ؛
}

.main-nav__list {
  الهامش: 0
  الحشو: 0؛
  محاذاة النص: المركز ؛
}

.main-nav__list-item {
  عرض: مضمنة.
}

.main-nav__link-item {
  عرض: كتلة مضمنة.
  الحشو:.
}

.main-nav__link-item — active {
  وزن الخط: غامق ؛
  لون احمر؛
  الخلفية: رمادي.
}

تحليل HTML و CSS

إذا قمت بتحليل HTML و CSS ، فستكتشف أسماء الفئات في كل عنصر. أسماء الفئات التي تصف نفسها بنفسها. لا تحتاج إلى البحث عن موقع ويب لقراءة موقع هذا المكون على الصفحة.

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

دعونا نتحقق مما إذا كنت قد أصلحت المشكلات التي رأيناها من قبل

  • الآن يمكنك نسخ HTML وستظل كما هي. إذا كنت ترغب في إعادة استخدام HTML ، فقم بتغيير .main-nav لـ "footer-nav" ولن ترى أي تصميم موروث من التنقل الرئيسي. لذلك هذا هو تماما قابلة للتطوير.
  • إذا كنت تريد الكتابة فوق التصميم الخاص بعنصر واحد أو عناصر متعددة ، فيجب عليك فقط إضافة اسم فئة آخر ، بهذه البساطة!
  • خاصةً عند استخدام معالج CSS المسبق ، فإن بنية التطوير الخاصة بك سوف تتمتع ببنية جيدة.
  • محددات CSS وأسماء الفصول تصف نفسها بنفسها. لذلك فمن السهل أن تجد الآن. انه يعطي الكثير من السياق من قبل.

تاريخ التحديث: 04-102017 في الساعة 14:27

مثال BEM الآخر

إذا كنت غير مقتنع بمثالي لماذا يجب عليك استخدام BEM ، وهذه هي المشكلة الآن! يرجى مراجعة موقع Sparkbox ، وهناك مثال مفصل وعملي للغاية لكيفية استخدام BEM في التنمية الخاصة بك. (حصلت على هذه النصيحة من أحد التعليقات على رديت!

إذا كنت بحاجة إلى مساعدة

إذا كنت بحاجة إلى أي مساعدة في تحويل CSS إلى بنية BEM ، فالرجاء إخباري في التعليقات أو على Messenger !

اتبعنا:

تابعنا على متوسط: https://medium.com/mr-frontend-community
 تابعنا على تويتر: https://twitter.com/frontendmr
 تابعنا على Facebook: http://facebook.com/mrfrontendcommunity/
 تابعنا على Instagram:mrfrontend