اصطلاحات تسمية CSS التي ستوفر عليك ساعات من التصحيح

لقد سمعت الكثير من المطورين يقولون إنهم يكرهون CSS. في تجربتي ، يأتي هذا نتيجة عدم قضاء الوقت في تعلم CSS.

الكورية ؟؟

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며 ، 버전 은 한국어 여기 에서 보실 수 있습니다

إن CSS ليست أجمل "لغة" ، لكنها نجحت في دعم تصميم الويب لأكثر من 20 عامًا حتى الآن. لا تعمل بشكل سيء ، أليس كذلك؟

ومع ذلك ، عندما تكتب المزيد من CSS ، سترى بسرعة جانبًا سلبيًا كبيرًا.

من الصعب الحفاظ على CSS.

سوف تتحول CSS المكتوبة بشكل سيء بسرعة إلى كابوس.

فيما يلي بعض اصطلاحات التسمية التي ستوفر عليك القليل من التوتر وساعات لا تحصى في المستقبل.

استخدم واصلة محددة سلاسل

إذا كنت تكتب الكثير من JavaScript ، فإن كتابة المتغيرات في حالة الجمل هي ممارسة شائعة.

var redBox = document.getElementById('...')

عظيم ، أليس كذلك؟

المشكلة هي أن هذا الشكل من التسمية ليس مناسبًا تمامًا لـ CSS.

لا تفعل هذا:

.redBox { border: 1px solid red;}

بدلاً من ذلك ، قم بما يلي:

.red-box { border: 1px solid red;}

هذا هو اصطلاح تسمية CSS قياسي جدًا. يمكن القول أنه أكثر قابلية للقراءة.

كما أنه يتوافق مع أسماء خصائص CSS.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

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

لدى الفرق أساليب مختلفة لكتابة محددات CSS. تستخدم بعض الفرق محددات الواصلة ، بينما يفضل البعض الآخر استخدام اصطلاح تسمية منظم يسمى BEM.

بشكل عام ، هناك 3 مشاكل تحاول اصطلاحات تسمية CSS حلها:

  1. لمعرفة ما يفعله المحدِّد ، فقط من خلال النظر إلى اسمه
  2. للحصول على فكرة عن مكان استخدام المحدد ، فقط من خلال النظر إليه
  3. لمعرفة العلاقات بين أسماء الفئات ، فقط من خلال النظر إليها

هل سبق لك أن رأيت أسماء فئات مكتوبة مثل هذا:

.nav--secondary { ...}
.nav__header { ...}

هذا هو اصطلاح تسمية BEM.

شرح BEM لعمر 5 سنوات

يحاول BEM تقسيم واجهة المستخدم الإجمالية إلى مكونات صغيرة قابلة لإعادة الاستخدام.

انظر إلى الصورة أدناه:

لا ، إنها ليست حائزة على جوائز :(

يمثل رجل العصا مكونًا ، مثل كتلة التصميم.

ربما تكون قد خمنت بالفعل أن B في BEM تعني "Block".

في العالم الحقيقي ، يمكن أن تمثل هذه "الكتلة" تنقلًا في الموقع أو رأسًا أو تذييلًا أو أي كتلة تصميم أخرى.

باتباع الممارسة الموضحة أعلاه ، سيكون اسم الفئة المثالي لهذا المكون stick-man.

يجب تصميم المكون على النحو التالي:

.stick-man { }

لقد استخدمنا سلاسل محددة هنا. حسن!

E للعناصر

يرمز الحرف E في "BEM" إلى Elements.

نادرًا ما تعيش كتل التصميم الإجمالية في عزلة.

على سبيل المثال ، الرجل العصي لديه head، اثنان رائعان arms، و feet.

و head، feetو armsكلها عناصر داخل المكون. يمكن اعتبارها مكونات فرعية ، أي أطفال للمكوِّن الرئيسي الإجمالي.

باستخدام اصطلاح تسمية BEM ، يتم اشتقاق أسماء فئة العنصر عن طريق إضافة شرطين تحت السطر ، متبوعًا باسم العنصر.

فمثلا:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M للمعدلات

يرمز M في "BEM" إلى المعدِّلات.

ماذا لو تم تعديل الرجل العصا وكان بإمكاننا الحصول على رجل blueأو redرجل عصي؟

في العالم الحقيقي ، يمكن أن يكون هذا redزرًا أو blueزرًا. هذه تعديلات للمكون المعني.

باستخدام BEM ، يتم اشتقاق أسماء فئة المعدّل عن طريق إضافة واصلتين متبوعين باسم العنصر.

فمثلا:

.stick-man--blue {
}
.stick-man--red {
}

أظهر المثال الأخير تعديل المكون الرئيسي. هذا ليس هو الحال دائما.

ماذا لو كان لدينا رجال عصي headبأحجام مختلفة ؟

هذه المرة تم تعديل العنصر. تذكر أن العنصر هو مكون فرعي داخل الكتلة المحتوية الكلية.

و .stick-manيمثل Block، .stick-man__headالعنصر.

كما هو موضح في المثال أعلاه ، يمكن أيضًا استخدام الواصلات المزدوجة على النحو التالي:

.stick-man__head--small {
}
.stick-man__head--big {
}

مرة أخرى ، لاحظ استخدام الواصلات المزدوجة في المثال أعلاه. يستخدم هذا للدلالة على معدل.

الآن لقد حصلت عليه.

هذا هو الأساس الذي يعمل به اصطلاح التسمية BEM.

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

يمكنك قراءة المزيد عن BEM.

BEM - مُعدِّل عنصر الكتلة

BEM - Block Element Modifier هي منهجية تساعدك على تحقيق مكونات قابلة لإعادة الاستخدام ومشاركة التعليمات البرمجية في… getbem.com

لماذا نستخدم اصطلاحات التسمية؟

توجد مشكلتان صعبتان فقط في علوم الكمبيوتر: إبطال ذاكرة التخزين المؤقت وتسمية الأشياء - فيل كارلتون

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

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

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

الشعور بالثقة؟

أسماء CSS مع خطافات JavaScript

اليوم هو أول يوم ليوحنا في العمل.

تم تسليمه HTMLرمز يشبه هذا:

قرأ جون هذه المقالة وأدرك أن هذه قد لا تكون أفضل طريقة لتسمية الأشياء CSS. لذلك يمضي قدمًا ويعيد تشكيل قاعدة الشفرة على النحو التالي:

تبدو جيدة ، أليس كذلك؟

غير معروف لجون ، لقد كسر قاعدة الشفرة ؟؟؟

كيف؟

في مكان ما في كود JavaScript ، كانت هناك علاقة مع اسم الفئة السابق siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

لذلك ، مع التغيير في اسم الفئة ، navأصبح المتغير null.

كم هذا محزن.

لمنع مثل هذه الحالات ، توصل المطورون إلى استراتيجيات مختلفة.

1. استخدم أسماء فئة js

طريقة واحدة للتخفيف من مثل هذه الأخطاء هي استخدام js-*اسم الفئة للدلالة على العلاقة مع عنصر DOM المعني.

فمثلا:

وفي كود JavaScript:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

كقاعدة ، فإن أي شخص يرى js-site-navigationاسم الفئة سوف يفهم أن هناك علاقة مع عنصر DOM هذا في كود JavaScript.

2. استخدم سمة Rel

أنا لا أستخدم هذه التقنية بنفسي ، لكني رأيت الناس يفعلون ذلك.

هل تدرك هذا؟

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

في المثال السابق مع جون ، كان مؤيدو هذه التقنية يفعلون ذلك:

وفي JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

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

يعد الويب مكانًا كبيرًا به العديد من "الأساليب" المختلفة لحل نفس المشكلة.

3. لا تستخدم سمات البيانات

يستخدم بعض المطورين سمات البيانات كخطافات JavaScript. هذا ليس صحيحا. بحكم التعريف ، تُستخدم سمات البيانات لتخزين البيانات المخصصة .

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

نصيحة إضافية: اكتب المزيد من تعليقات CSS

هذا لا علاقة له باتفاقيات التسمية ، ولكنه سيوفر لك بعض الوقت أيضًا.

بينما يحاول الكثير من مطوري الويب عدم كتابة تعليقات JavaScript أو الالتزام ببعضها ، أعتقد أنه يجب عليك كتابة المزيد من تعليقات CSS.

نظرًا لأن CSS ليست "اللغة" الأكثر أناقة ، يمكن أن توفر التعليقات جيدة التنظيم الوقت عندما تحاول فهم شفرتك.

لا يضر.

ألق نظرة على مدى جودة التعليقات على كود مصدر Bootstrap.

لا تحتاج إلى كتابة تعليقات لتقول إنها color: redستعطي لونًا أحمر. ولكن ، إذا كنت تستخدم خدعة CSS أقل وضوحًا ، فلا تتردد في كتابة تعليق.

هل أنت مستعد لتصبح محترفًا؟

لقد قمت بإنشاء دليل CSS مجاني للحصول على مهارات CSS الخاصة بك على الفور. احصل على الكتاب الإلكتروني المجاني.