عندما أقوم بزيارة موقع ويب جميل، لا يسعني إلا أن ألقي نظرة على الكود المصدري. إنه مثل امتلاك زوج من نظارات الأشعة السينية والقدرة على رؤية أي شخص - حتى من خلال ورقة التين الخاصة به. هذه مجرد مسألة بالطبع! لا أستطيع الانتظار لمعرفة ما إذا كان هذا الموقع الجميل مكتوبًا بنفس الكود الجميل أم أنه مجرد جمال في الجمال. شفرة؟ جمال؟ بالتأكيد! بعد كل شيء، الكود يشبه الشعر. (الترجمة: "الرمز هو الشعر" هو شعار نظام التدوين الشهير WordPress .) هذه مجرد لغة HTML الأساسية وهي بطبيعة الحال ليست معقدة وأنيقة مثل اللغات الديناميكية الأخرى، لكنها لا تزال تحافظ على الفن الذي قدمه منشئها ضربات الفرشاة.
هذا جعلني أبدأ بالتفكير في كيفية جعل الكود جميلًا؟ مع HTML، كل هذا عمل يدوي. دعونا نرى كيف يمكن للغات الترميزية أن تصل إلى حالة من الجمال.
الصورة كبيرة بما يكفي (2000 × 2000) بحيث يمكنك طباعتها ولصقها في خزانتك الشخصية وإبهار أصدقائك. وبعد قولي هذا، هذا في الواقع حجم مربك. سأقوم بنشر صورة PSD الأصلية ليقوم الجميع بتعديلها.
HTML5 - HTML5 وعناصره الجديدة تضفي جمالاً غير مسبوق.
DOCTYPE - HTML5 لديه أفضل نوع مستند .
المسافة البادئة - يتم استخدام علامات التبويب والمسافات لوضع مسافة بادئة للتعليمات البرمجية لإظهار العلاقة بين الوالدين والطفل بين العلامات بشكل صحيح والتأكيد على البنية الهرمية.
مجموعة الأحرف - يجب تقديم إعلان مجموعة الأحرف في الرأس قبل كل المحتوى.
العنوان - عنوان الموقع بسيط وواضح. ابدأ بوصف وظيفة الصفحة، بعد الفاصل، وانتهي بعنوان موقع الويب.
CSS - يستخدم فقط ورقة أنماط بسيطة (يتم الإعلان عن أنواع الوسائط في ورقة الأنماط)، ويستهدف فقط المتصفحات الجيدة. سيحصل IE6 والإصدارات الأقل على ورقة أنماط عامة.
الجسم - من خلال إعطاء معرف للنص ، يمكنك تصميمه بشكل فريد لصفحات مختلفة دون الحاجة إلى المزيد من العلامات.
JavaScript - يتم استدعاء jQuery (أجمل مكتبة JavaScript النصية) من Google. يتم تحميل ملف JavaScript واحد فقط. تتم الإشارة إلى كل برنامج نصي في أسفل الصفحة.
مسار الملف - لتحقيق الكفاءة، استخدم المسارات النسبية لموارد الموقع. من منظور التكيف مع إعادة الطباعة، تستخدم ملفات المحتوى (مثل الصور) مسارات مطلقة.
سمات الصورة - تحتوي الصورة على نص بديل، وذلك بشكل أساسي في حالة فقدان الصورة، ولكن يمكن استخدامها أيضًا للتحقق. لتحسين كفاءة العرض، من الأفضل تحديد عرض الصورة وارتفاعها.
المحتوى الرئيسي أولاً – يجب أن يأتي المحتوى الرئيسي للصفحة بعد العلامات الأساسية والتنقل، وقبل أي محتوى مساعد (مثل الأشرطة الجانبية).
عناصر وصفية مناسبة على مستوى الكتلة - HEADER، NAV، SECTION، ARTICLE، ASIDE... ستصف " أقسام الوصف " الجديدة المحتوى بشكل أفضل من DIV السابق.
التسلسل الهرمي - إن كتابة علامات العنوان بالأحرف الكبيرة ستفي بالغرض واتباع " تسلسل هرمي " واضح.
العلامات الوصفية المناسبة - اعتمادًا على الاحتياجات، يتم وضع علامة على القائمة على أنها: قوائم غير مفروزة، ومرتبة، ومخصصة غير شائعة الاستخدام.
تضمين المحتوى المشترك – من الأفضل تضمين نفس المحتوى الذي يظهر على صفحات مختلفة في الصفحة من جانب الخادم. (بأي طريقة أو لغة أو نظام إدارة المحتوى أو أي شيء يناسبك.)
الفئات الدلالية – لا تحتاج فقط إلى إعداد أسماء العناصر الصحيحة، ولكنك تحتاج أيضًا إلى تسمية الفئات والمعرفات دلاليًا : يمكن أن تكون بمثابة وصف حتى بدون تعليمات محددة. (على سبيل المثال "عمود" أفضل من "يسار")
الفئات – عندما تحتاج عناصر متعددة إلى استخدام أنماط متشابهة، حاول تحديد نفس الفئة لها. (قابلية إعادة الاستخدام)
المعرفات – عندما يظهر العنصر مرة واحدة فقط في الصفحة، حاول تحديد معرفات لها، ولا تحدد نفس المعرف لعناصر مختلفة.
العناصر الديناميكية – تتم إضافة التأثيرات الديناميكية فقط عند الحاجة إليها حقًا.
الأحرف المشفرة - عند ظهور أحرف خاصة، يرجى الانتباه إلى ترميز الأحرف .
خالية من التصميم - كل شيء على الصفحة ليس له علاقة بالتصميم ، ولا تحتاج حتى إلى تحديد النمط الذي تريده. يقتصر كل شيء في الصفحة على العناصر الثلاثة التالية: موارد الموقع المطلوبة والمحتوى والوصف.
التعليقات - عند النظر إلى الكود، سيتم تضمين المحتوى الذي لا يتطلب تركيزًا خاصًا أو غير واضح بشكل خاص في التعليقات .
صالح - يتوافق الترميز على مستوى الموقع مع التحقق من صحة W3C. انتبه إلى إغلاق العلامة، وتأكد من السمات الضرورية، وتجنب الأساليب القديمة، وما إلى ذلك.
النص الأصلي: http://css-tricks.com/what-beautiful-html-code-looks-like/
الترجمة: http://horans.cn/what-beautiful-html-code-looks-like/