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