قديماً نعتمد كثيرًا على المطورين والمبرمجين للمساعدة في تحديث الموقع. بفضل CSS ومرونته، يمكن استخراج الأنماط بشكل مستقل عن الرموز. الآن، مع زيادة طرق تعلم CSS حتى المبتدئ يمكنه بسهولة تغيير نمط موقع الويب. وسواء كنت ترغب في اختيار CSS لإنشاء موقع الويب الخاص بك، أو لمجرد تعديل شكل مدونتك، من الجيد دائمًا أن تبدأ مع الأساسيات للحصول على أساس أقوى. والآن دعونا نلقي نظرة على بعض نصائح CSS التي ستكون مفيدة للمبتدئين.
إذا كنت تقرأ هذا المقال فبالتأكيد أنت من الأشخاص المهتمه بعالم البرمجة وكل مايخصها ..
ولذلك يمكنك التعرف على الخطة الشاملة الخاصة بالبرمجة والأشتراك بها، والتمتع بخصم حصري
من موقعنا احصل على الخطة الشاملة لتعليم البرمجة عن طريق بناء اكثر من ٣٠ موقع وتطبيق ولعبة خلال
فترة ٤ شهور متكاملة مع هدايا قيمة جدا بقيمة اكثر من ٧٠٠ دولار وشهادات في البرمجة ستغير حياتك
ويمكن لك الآن أن تصبح مبرمج محترف ، قم بالأشتراك معنا في الخطة الشاملة،
لتعليم البرمجة من خلال هذا الرابط .. https://anbilarabi.com/khottah
ما هي CSS؟
تعد Cascading Style Sheets (CSS) لغة الأوراق المتتالية،والتي تساعد في تحديد محتوى الموقع وإعدادات التصميم (مثل الألوان والتخطيط) بشكل منفصل. كلما كانت ملفات CSS أكثر تعقيدًا وأكبر حجمًا، كلما طال انتظار الزائر حتى ينتهي الموقع من التحميل بالكامل. ويمكنك تجنب هذا عن طريق ضغط CSS، ويمكنك تقليل حجم ملف CSS وزيادة أداء موقعك الإلكتروني.
خطوات بسيطة لتحسين أداءCSS
هناك العديد من الطرق لتحسين CSS الخاص بك بحيث يكون التحميل أسرع وأسهل في العمل وأكثر كفاءة:
1- تعلم استخدام أدوات التحليل.
لا يمكنك معالجة مشاكل الأداء إلا إذا كنت تعرف الأخطاء جيداً. المتصفح Dev Tools هو أفضل مكان للبدء عن طريق الضغط على القائمة أو الضغط على F12 أو Ctrl + Shift + I أو Cmd + Alt + I لسفاري على ماك. وتقدم جميع المتصفحات تسهيلات مماثلة.
تعرض علامة تبويب “الشبكة” رسماً بيانياً للأصول أثناء تنزيلها. للحصول على أفضل النتائج، لهذا قم بتعطيل ذاكرة التخزين المؤقت وفكر في تقليل سرعة الشبكة. ثم ابحث عن الملفات البطيئة في التنزيل أو حظر الآخرين. وبعدها سيقوم المستعرض بحظر عرض المتصفح بينما يتم تنزيل ملفات CSS و Java Script وتحليلها.
2-قم باستبدال الصور بتأثيرات CSS.
نادرًا ما يكون من الضروري استخدام صور الخلفية للإطار والظلال والحواف الدائرية والتدرجات وبعض الأشكال الهندسية. ويستخدم تعريف “صورة” باستخدام كود CSS عرض نطاق ترددي أقل بكثير وأسهل في التعديل أو التنشيط لاحقاً.
3- لا تنسى إزالة الخطوط غير الضرورية.
تسهل الخدمات مثل Google Fonts إضافة خطوط مخصصة إلى أي صفحة. لسوء الحظ، يمكن لسطر أو اثنين من التعليمات البرمجية استرداد مئات الكيلوبايت من بيانات الخط. لهذا قم باستخدام الخطوط التي تحتاج إليها. وحمل الأوزان والأساليب التي تحتاجها، وضع في الاعتبار الخطوط المتغيرة، التي تحدد الأوزان والأنماط المتعددة عن طريق الاستيفاء بحيث تكون الملفات أصغر.
4- استخدام تقنيات التخطيط الحديثة.
لسنوات عديدة كان من الضروري استخدام CSS float لتخطيط الصفحات. هذه التقنية تعتبر اختراق. يتطلب الكثير من التعليمات البرمجية والتغيير في الهامش أو الحشو لضمان عمل المخططات. وهناك بدائل الحديثة، فعن طريق CSS Flex box( للتخطيطات أحادية البعد) ستتمكن من الالتفاف إلى الصف التالي وفقًا لعرض كل كتلة. كما أن Flex box يعتبر مثالي للقوائم ومعارض الصور والبطاقات وما إلى ذلك. كما أن شبكة CSS للتخطيطات ثنائية الأبعاد مع صفوف وأعمدة واضحة. الشبكة مثالية لتخطيطات الصفحة.
5- تقليل كود CSS
الرمز الأكثر موثوقيه وسرعة هو الرمز الذي لا تحتاج إلى كتابته أبدًا، أصغر ورقة الأنماط الخاصة بك وأسرعهم سوف يتم تنزيلها وتحليلها. وينوي جميع المطورين هذا ولكن يمكن أن يزيد CSS بمرور الوقت. لهذا يجب الاحتفاظ بالكود القديم غير الضروري بدلاً من إزالته والمجازفة بخرق شيء ما.
بعض التوصيات التي يجب مراعاتها: أهمها تجنب الإعلانات المتداخلة. وكذلك تجنب الأنماط الخاصة بHTML، ويمكن لأدوات مثل Un CSS المساعدة في إزالة التعليمات البرمجية المتكررة من خلال تحليل HTML الخاص بك، ولكن كن حذراً بشأن حالات CSS الناتجة عن تفاعل JavaScript.
6- استخدم الرسوم المتحركة الخاصة بال CSS.
ستكون التحولات والرسوم المتحركة الأصلية لـ CSS أسرع دائمًا من التأثيرات التي تدعم جافا سكريبت والتي تقوم بتعديل نفس الخصائص. ولن تعمل الرسوم المتحركة لـ CSS في المتصفحات القديمة مثل IE9 وغيرها….
ومع ذلك، تجنب الرسوم المتحركة. كما يمكن أن تعزز التأثيرات الدقيقة تجربة المستخدم دون التأثير سلبًا على الأداء. وقد تؤدي الأفراط في استخدام الرسوم المتحركة المفرطة إلى إبطاء المتصفح وتسبب دوار الحركة لبعض المستخدمين.
و في النهاية فأن النصيحة الأكثر أهمية هي فهم أوراق الأنماط الخاصة بك أو CSS ، حيث أن CSS سهلة التعلم ولكن يصعب إتقانها. فلا يمكنك الاستغناء عن التعلم إذا كنت تريد إنشاء كود فعال. ومن المؤكد أن تؤدي المعرفة بأساسيات CSS إلى إحداث ثورة في سير عملك وتحسين تطبيقاتك وتحسين الأداء بشكل ملحوظ.
المصادر:
https://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/
https://www.ionos.com/digitalguide/websites/web-design/css-compression-for-consistent-loading-times/