يمكن لمطوري الويب (أي أنت) إنشاء فئات CSS وأسماء معرفات واستخدام هذه الأسماء لتحديد Divs وعناصر الصفحة والعلامات الأخرى. بالنسبة للمطورين، عند تسمية محددات CSS التي تعيد تعريف علامات (علامات) XHTML، يجب عليهم التأكد من أنها تطابق بدقة العلامات المحددة مسبقًا، ولكن بالنسبة لأسماء محددات الفئة والمعرف، فهي مسألة رأي. ومع ذلك، ليس من الجيد تسمية هذه الفئات والمعرفات كما يحلو لك.
بعد قراءة سلسلة من المقالات حول فئات CSS واصطلاحات تسمية المعرفات التي كتبها آندي كلارك (من Stuff and Nonsense وAll That Malarkey) وإريك ماير، بدأت أفكر في استخدام الفئات والمعرفات في عملية تصميم موقع الويب الخاص بي. طريقة التسمية.
تسمية بديهية
عند تصميم صفحة ويب والحاجة إلى تحديد Div، فإن الفكرة الأكثر طبيعية هي تسمية العنصر باستخدام الكلمات التي تصف موقعه على الصفحة. هذا الأسلوب يجعل أسماء الفئات والمعرفات تبدو كما يلي:
اللوحة العلوية
الملاحة الأفقية
الجانب الأيسر
العمود الأوسط
العقيد الأيمن
هذه طرق صالحة لتسمية فئات ومعرفات CSS وXHTML. هذه المصطلحات بسيطة ووصفية، وبالتالي تلبي الحاجة إلى تحديد عناصر الصفحة وأنماط CSS المقابلة لها.
المشكلة هي أن مثل هذا الاسم يرتبط بتعبير محدد عن محتوى الصفحة. تشير هذه الأسماء إلى موضع عناصر الصفحة داخل تخطيط صفحة محدد، لذا فإن استخدامها خارج هذا التخطيط سيكون غير مناسب أو حتى مربكًا. وفي الوقت نفسه، لا تتضمن هذه الأسماء بنية محتوى المستند. لذلك، إليك طريقة أفضل لتسمية فئات ومعرفات CSS.
التسمية المنظمة
العلامات المنظمة تعني الفصل الكامل لمعلومات التعبير/الموقع عن المحتوى - وهذا يشمل أسماء الفئات والمعرفات التي تظهر في العلامات.
يتم استخدام المعلومات ذات الصلة ذات العلامات لوصف بنية المستند بدلاً من مظهره. تتيح لنا هذه الميزة إعادة استخدام المحتوى والترميز بتنسيقات مظهر مختلفة بمجرد تغيير CSS. عندما تفهم هذه الطريقة، فمن السهل أن تجد أن استخدام موضع الصفحة لتسمية الفئات والمعرفات غير مناسب تمامًا عند التعامل مع تنسيقات المظهر مثل الصوت. لذلك، يجب تنظيم الفئات والمعرفات وتسميتها بناءً على الغرض منها في المستند بدلاً من مكان ظهورها.
يمكن تسمية الفئات وأسماء المعرفات بطريقة منظمة كما هو موضح أدناه:
العلامات التجارية
الملاحة الرئيسية
com.subnav
المحتوى الرئيسي
الشريط الجانبي
من السهل فهم هذه الأسماء مثل اصطلاحات التسمية البديهية، ولكنها تصف دور عنصر الصفحة بدلاً من موقعه. وهذا يجعل التعليمات البرمجية أكثر اتساقًا مع الهدف الأصلي المتمثل في استخدام العلامات الهيكلية الخالصة، أي أنه يمكن للمطورين التعامل مع تنسيقات العرض في الوسائط المختلفة دون تغيير العلامات.
حتى إذا كنت لا تخطط لتنسيق صفحات الويب الخاصة بك في وسائط أخرى، فإن استخدام التسمية المنظمة يمكن أن يساعدك في تسهيل ترقيات الموقع أو إعادة تصميمه في المستقبل. على سبيل المثال، تعمل التسمية المنظمة على تجنب الارتباك عند نقل عنصر div بنفس المعرف في العمود الأيمن إلى الجانب الأيسر من الصفحة. تعد تسمية الشريط الجانبي div بهذه الطريقة أكثر ملاءمة لأنه بغض النظر عن الجانب الذي يظهر عليه من الصفحة، يظل الاسم بديهيًا وسهل الفهم للمطورين.
بعض اصطلاحات التسمية
قام آندي كلارك بتحليل الكود المصدري لـ 40 موقع ويب صممها المطورون الذين دافعوا عن مفاهيم تصميم الويب الموحدة. على الرغم من أن أسماء الفئات والمعرفات غير متناسقة إلى حد كبير، إلا أنه لا يزال من الممكن العثور على بعض الأسماء الشائعة التي تظهر بشكل متكرر. يتم تقديم قائمة أمثلة لأسماء الفئات/المعرفات الأكثر استخدامًا هنا:
header
محتوى
التنقل
الشريط الجانبي
تذييل
هل تشير أسماء الفئات والمعرفات الشائعة هذه إلى ولادة معيار أو تشكيل اتفاقية مقبولة بشكل عام؟ ورغم أن هذا ما أتمناه، إلا أنني لا أعتقد ذلك. أرغب حقًا في رؤية مجموعة من معايير التسمية لعناصر الصفحة الشائعة التي نراها كل يوم. وفي الوقت نفسه، فإن استخدام طريقة تسمية موحدة يمكن أن يسهل العثور على عناصر الصفحة وترقية موقع الويب، خاصة عندما تحتاج إلى تبديل العمل بين المواقع التي طورها مطورون مختلفون في أوقات مختلفة.