غالبًا ما يعاني المطورون من تسمية فئات ومعرفات CSS. اتبع أفضل الممارسات هذه للتسمية الفعالة.

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

1. استخدم الأسماء الدلالية

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

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

/ * مثال على الأسماء الدلالية * /
.header {}
.sidebar {}

2. استخدم اصطلاحات تسمية متسقة

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

تعد اصطلاحات التسمية BEM (Block Element Modifier) ​​و OOCSS (Object-Oriented CSS) اصطلاحات التسمية الأكثر تفضيلاً.

instagram viewer

يمكنك استخدام اصطلاح التسمية OOCSS لكتابة كود CSS المعياري والقابل للإدارة والقابل للتطوير. هنا توضيح كيف يمكنك إنشاء قائمة التنقل باستخدام OOCSS:

/* بناء */
.nav {
عرض: ثني;
نمط قائمة: لا أحد;
}


.nav__item {
الهامش الأيمن: 1rem;
}


. nav__link {
زخرفة النص: لا أحد;
لون: #333;
}


/* مظهر */


. nav__link:يحوم {
زخرفة النص: تسطير;
}

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

3. تجنب مساحات الأسماء

في CSS ، تعد مساحات الأسماء هياكل دلالية تتيح لك توفير بادئة مساحة اسم لتحديداتها. للتمييز بين الوحدات النمطية أو المكتبات أو الأجزاء الأخرى من قاعدة التعليمات البرمجية التي قد تحتوي على أسماء فئات متضاربة ، يتم استخدام بادئة مساحة الاسم.

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

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

يؤدي هذا إلى تضخم كود CSS ، وهو أمر محير وصعب للحفاظ عليه بمرور الوقت.

خذ على سبيل المثال:

/ * مع مساحة الاسم * /
.my-module.محتوى {
لون الخلفية: أزرق;
}


/ * بدون مساحة الاسم * /


.module-header {
لون الخلفية: أحمر;
}


.module-content {
لون الخلفية: أصفر;
}

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

في الجزء الثاني ، يتم استبدال مساحة الاسم بأسماء فئة وصفية .module-header و .module-content. بالإضافة إلى تسهيل فهم الكود ، فإن هذا يجعله أسهل في الصيانة.

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

استخدم أسماء الفئات الوصفية على سبيل المثال:

.header {
لون الخلفية: أحمر;


}


.محتوى {


لون الخلفية: أصفر;
}

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

4. تجنب الأسماء العالمية

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

ضع في اعتبارك المثال أدناه:

 استخدام غير صحيح للأسماء العالمية 
<شعبةفصل="حاوية">
<شعبةفصل="الشريط الجانبي">


 المحتوى هنا 
شعبة>
شعبة>

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

من الأفضل استخدام أسماء أكثر دقة في نطاق المكون أو الوحدة ذات الصلة لتقليل هذه المشكلات.

انظر إلى نسخة محسنة.

 تم تحسينه بأسماء محددة 
<شعبةفصل="header__container">
<شعبةفصل="sidebar__content">


 المحتوى هنا 
شعبة>
شعبة>

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

يقلل استخدام أسماء محددة من مخاطر تعارض التسمية ويضمن أن الأنماط تؤثر فقط على المكونات المتوقعة داخل المكونات أو الوحدات النمطية الخاصة بها.

5. استخدم اصطلاح تسمية BEM

يشتهر اصطلاح التسمية BEM (Block Element Modifier) ​​بتسمية فئات CSS والمعرفات في مشاريع JavaScript. يوفر BEM طريقة منظمة ووحدات معيارية لتسمية العناصر ، ويشجع على إعادة الاستخدام ، ويجعل صيانة قواعد الرموز أسهل.

تتكون اتفاقيات BEM من كتل وعناصر ومعدلات. يسمى العنصر عالي المستوى أو المكون المستقل كتلة. العناصر هي الأجزاء المكونة للكتلة التي تعتمد على سياق الكتلة. يمكن للمُعدِّلات تغيير مظهر أو سلوك كتلة أو عنصر.

فيما يلي مثال باستخدام اصطلاح التسمية BEM:

/ * مثال على اصطلاح تسمية BEM * /
/* حاجز */
.header {} 


/ * عنصر الكتلة * /
.header__logo {} 
.header__ القائمة {}
/ * معدل العنصر * /
.header__menu - نشط {}

يعرض الرسم التوضيحي أعلاه أ رأس منع مع شعار و أ قائمة طعام عنصر. ال قائمة طعام البند يتلقى نشيط التغيير لإظهار أنه أصبح نشطًا.

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

6. استخدم البادئات أو اللواحق

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

 HTML مع بادئة JavaScript 
<زرفصل="تبديل js">تبديلزر>
<شعبةبطاقة تعريف="js-modal">مشروطشعبة>

7. استخدم الأسماء الوصفية

يمكنك فهم غرض العنصر أو وظيفته أو محتواه بشكل أفضل من خلال الأسماء الوصفية.

ضع في اعتبارك المثال أدناه:

/ * الأسماء غير الوصفية * /
.blue-box {
/ * الأنماط هنا * /
}
أ {
/ * الأنماط هنا * /
}

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

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

ضع في اعتبارك المثال المحسّن أدناه:

/ * الأسماء الوصفية * /
.product-card {
/ * الأنماط هنا * /
}
.navigation-link {
/ * الأنماط هنا * /
}

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

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

8. استخدم أسماء مختصرة ومختصرة

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

ضع في اعتبارك الحالة التي ترغب في استخدام CSS فيها لتخصيص قائمة التنقل على موقع الويب الخاص بك. يمكنك استخدام أسماء أقصر وأكثر تحديدًا مثل nav-item أو التنقل بدلا من تلك الطويلة مثل واجهة التنقل أو رابط التنقل الرئيسي.

.nav-item {
/ * أنماط عناصر قائمة التنقل * /
}
.nav-link {
/ * أنماط روابط التنقل * /
}

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

أفضل الممارسات لتسمية فئات ومعرفات CSS

في مشروع JavaScript ، من الضروري تسمية فئات ومعرفات CSS بشكل مناسب لقراءة الكود والصيانة وقابلية التوسع.

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