فصل المحتوى عن التصميم يجعل إدارة الموقع أسهل
أصبح CSS (Cascading Style Sheets) الطريقة الفعلية للأسلوب وتخطيط مواقع الويب. يستخدم المصممون أوراق الأنماط لإخبار المتصفح بكيفية عرض موقع الويب من حيث الشكل والمظهر ، ويشمل عوامل مثل اللون والمسافات والخطوط والكثير غيرها.
يمكن نشر أنماط CSS بطريقتين:
- مضمنة - ضمن ترميز صفحة الويب نفسها ، على أساس كل عنصر على حدة
- في مستند CSS مستقل ، يرتبط به الموقع
أفضل الممارسات ل CSS
"أفضل الممارسات" هي طرق تصميم وبناء مواقع الويب التي أثبتت أنها الأكثر فاعلية وتعطي أكبر عائد للعمل المتضمن. إن اتباعها في CSS في تصميم الويب يساعد مواقع الويب على البحث والوظيفة إلى أقصى حد ممكن. لقد تطورت على مر السنين مع لغات وتكنولوجيات الويب الأخرى ، وأصبحت ورقة أنماط CSS المستقلة هي الأسلوب المفضل للاستخدام.
يمكن أن يؤدي اتباع أفضل الممارسات لـ CSS إلى تحسين موقعك بالطرق التالية:
- يفصل المحتوى عن التصميم. أحد الأهداف الرئيسية لـ CSS هو إزالة عناصر التصميم من HTML ووضعها في مكان آخر للمصمم للمحافظة عليه. كما يعمل ذلك على فصل المصممين عن المطورين بحيث يمكن لكل منهم التركيز على مجالات خبرته. لا يجب أن يكون المصمم مطورًا للحفاظ على مظهر موقع الويب.
- يجعل من السهل الصيانة. أحد العناصر الأكثر إغفالًا لتصميم الويب هو الصيانة. على عكس المواد المطبوعة ، لا يكون موقع الويب مطلقًا "واحدًا وفعلًا". يمكن أن يتطور المحتوى والتصميم والوظيفة مع مرور الوقت. إن وجود CSS في مكان مركزي ، بدلاً من رشها في جميع أنحاء الموقع ، يجعل الأمور أسهل بكثير في الحفاظ عليها.
- يحافظ على سهولة الوصول إلى موقعك. يساعد استخدام أنماط CSS محركات البحث والأشخاص ذوي الإعاقة على التفاعل مع موقعك.
- يحافظ على موقعك الحالي لفترة أطول. من خلال استخدام أفضل الممارسات مع CSS ، فإنك تلتزم بالمعايير التي ثبت أنها مستقرة لكنها مرنة بدرجة كافية لاستيعاب التغيير في بيئة تصميم الويب.
أنماط مضمنة ليست أفضل الممارسات
الأنماط المضمنة ، في حين أن لديها غرضًا ، ليست عمومًا أفضل طريقة للحفاظ على موقعك على الويب. يعارضون كل واحد من أفضل الممارسات:
- لا تفصل الأنماط المضمّنة المحتوى عن التصميم. الأنماط المضمنة هي نفسها تمامًا مثل الخط المضمن وعلامات التصميم المشكوك فيها الأخرى التي يطرحها المطورون العصريون. تؤثر الأنماط فقط على العناصر الفردية الخاصة التي يتم تطبيقها عليها ؛ في حين أن ذلك قد يمنحك تحكمًا أكثر دقة ، فإنه أيضًا يجعل جوانب أخرى من التصميم والتطوير - مثل الاتساق - أكثر صعوبة.
- الأنماط المضمنة تسبب الصداع الصيانة. عندما تعمل مع أوراق الأنماط ، قد يكون من الصعب معرفة مكان وضع الأنماط. عندما تتعامل مع مزيج من الأنماط المضمنة والمضمنة والخارجية ، يكون لديك العديد من المواقع للتحقق منها. إذا كنت تعمل على فريق تصميم الويب أو تضطر إلى إعادة تصميم أو صيانة موقع ويب أنشأه شخص آخر ، فستواجه مشكلة أكبر. بمجرد العثور على النمط وتغييره ، سيكون عليك القيام بذلك على كل عنصر في كل صفحة يتم وضعها فيه. وهذا يزيد من الوقت وميزانيات العمل بشكل فلكي.
- الأنماط المضمنة ليست قابلة للوصول. على الرغم من أن قارئ الشاشة الحديث أو أي جهاز مساعد آخر قد يكون قادرًا على التعامل مع السمات المضمنة والعلامات بشكل فعال ، إلا أن بعض الأجهزة القديمة لا تستطيع ذلك ، مما قد يؤدي إلى عرض بعض صفحات الويب المعروضة بشكل غريب. يمكن أن تؤثر الأحرف الزائدة والنص على كيفية مشاهدة صفحتك بواسطة روبوت محرك البحث أيضًا ، لذا لا تعمل صفحتك كذلك من حيث تحسين محركات البحث (SEO).
- تجعل الأنماط المضمنة صفحاتك أكبر. إذا كنت ترغب في ظهور كل فقرة على موقعك بطريقة معينة ، فيمكنك القيام بذلك مرة واحدة مع ستة أسطر أو حتى من الشفرة في ورقة أنماط خارجية. إذا قمت بذلك باستخدام أنماط مضمنة ، يجب عليك إضافة تلك الأنماط إلى كل فقرة في موقعك. إذا كان لديك خمسة أسطر من CSS ، فسيتم ضرب خمسة أسطر في كل فقرة على موقعك. يمكن أن يزيد هذا النطاق الترددي ووقت التحميل بسرعة.
البديل لأنماط المضمن: أوراق الأنماط الخارجية
بدلاً من استخدام الأنماط المضمنة ، استخدم أوراق الأنماط الخارجية . تمنحك جميع مزايا أفضل ممارسات CSS وسهولة الاستخدام. إذا كنت مستخدمًا بهذه الطريقة ، فإن جميع الأنماط المستخدمة على موقعك تعيش في مستند منفصل يتم ربطه بعد ذلك بمستند ويب مع سطر واحد من الشفرة. تؤثر أوراق الأنماط الخارجية على أي مستند يتم إرفاقه به. وهذا يعني أنه إذا كان لديك موقع ويب مكون من 20 صفحة تستخدم فيه كل صفحة ورقة الأنماط نفسها - والتي عادةً ما يتم تنفيذها - يمكنك إجراء تغيير على كل واحدة من تلك الصفحات ببساطة عن طريق تحرير تلك الأنماط مرة واحدة ، في مكان واحد. إن تغيير الأنماط في مكان واحد أكثر ملاءمة من البحث عن هذا الترميز على كل صفحة من صفحات موقعك. هذا يجعل إدارة الموقع طويلة الأجل أسهل بكثير.