عندما نواجه ملفات CSS وجافا سكريبت الكبيرة بشكل متزايد في مشاريع مواقع الويب، سواء للتطوير الثانوي أو تحليل المتصفح، يجب تحسين أكوادها، لكن التحسين لا يعني ببساطة ضغط حجم الملف أو تقليله. التنظيم الواضح والكفاءة التشغيلية العالية هي النتائج التي نريدها. إذن ما هي الطرق الموجودة لتحسين كود CSS الخاص بنا؟ دعونا نلقي نظرة على بعض الاقتراحات أدناه.
1.
يمكن أن يؤدي استخدام الاختصارات إلى تقصير وقت العمل وتقليل حجم ملفاتك، لماذا لا؟
قم بتعيين قيم مختلفة للاختلافات المماثلة:
عرض نسخة عادية إلى الحافظة؟
ص {
الهامش العلوي: 10 بكسل؛
الهامش الأيمن: 20 بكسل؛
الهامش السفلي: 30 بكسل؛
الهامش الأيسر: 40 بكسل؛
}
ع {
الهامش العلوي: 10 بكسل؛
الهامش الأيمن: 20 بكسل؛
الهامش السفلي: 30 بكسل؛
الهامش الأيسر: 40 بكسل؛
}
استخدم الاختصارات:
عرض نسخة عادية إلى الحافظة؟
ع { الهامش: 10px 20px 30px 40px }
ع { الهامش: 10px 20px 30px 40px }
دعونا نلقي نظرة على اختصارات الخطوط شائعة الاستخدام
راجع دليل اختصار CSS (الإنجليزية) وCSS الفعال مع خصائص الاختزال (الإنجليزية) لمعرفة المزيد حول خصائص الاختزال.
2. تجنب استخدام المأجورون
مدونة جون هيك hicksdesign.co.uk/journal استخدام التعليقات الشرطية للمتصفح
يعد الاختراق أمرًا سيئًا، فهو سيحدد نفس الكود لمتصفحات مختلفة، مما يجعل CSS مرهقًا. الآن أصبحنا نعرف كيفية استخدام التعليقات الشرطية بدلاً من الاختراقات، فهي مقبولة في IE6 وIE7، وحتى فريق IE يوصي باستخدامها. استخدم التعليقات الشرطية لخدمة كود CSS الخاص بميزات المتصفح، لذلك، يتم استخدام كود CSS الأساسي الأصغر لخدمة المتصفحات التي تتوافق مع المعايير، ولن يتم تنزيله إلا عند حدوث الشروط المطلوبة (مثل ملفات CSS الإضافية). !
دعونا نلقي نظرة على مثال التعليمات البرمجية باستخدام التعليقات الشرطية في IE6:
عرض نسخة عادية إلى الحافظة؟
<!--[إذا كان IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
يؤدي هذا الرمز إلى قيام IE6 بتنزيل ie6.css إضافي لتحليل كود CSS المخصص له. وبالمثل، إذا كنت تستهدف IE7، فما عليك سوى استبدال 6 و7 أعلاه.
3. استخدم المساحة البيضاء
سواء كان ذلك للقراءة الخاصة بك أو للتطوير الثانوي، يجب عليك الحفاظ على سهولة قراءة CSS.
نحن لا نشجعك على إزالة كافة تنسيقات المسافات البيضاء، مثل علامات التبويب وفواصل الأسطر والمسافات وما إلى ذلك، من أجل الحصول على ملف CSS أصغر. يوصى بوضع مسافة بادئة للتعليمات البرمجية المتداخلة بعلامة تبويب، ويجب أن تكون جميع السمات في سطر منفصل.
بمقارنة الصورتين أعلاه وأدناه، ما هو التنسيق الذي يمكن أن يساعدك في توفير المزيد من الوقت لإجراء التعديلات؟ ستسهل عليك المساحة البيضاء إدارة التعليمات البرمجية الخاصة بك.
4. قم بإزالة الأطر الزائدة وإعادة التعيين
إعادة تعيين القواعد المستخدمة بواسطة إطار عمل CSS لنظام 960 Grid System الخاص بـ Nathan Smith
إذا اخترت استخدام إطار عمل CSS، بما في ذلك الإطار الذي كتبته بنفسك، إذا قمت بفحص الكود فستجد بالتأكيد أن بعض القواعد الموجودة في إطار العمل لا تنطبق على إطار عملك الحالي يمكن حذف الملف.
ما يمكن التفكير فيه هو إعادة التعيين. تحظى إعادة التعيين التي تستخدمها YUI Grid CSS وإعادة تعيين Eric Meyer بشعبية كبيرة حاليًا. يمكن أن تؤدي عمليات إعادة التعيين إلى إزالة الأنماط الافتراضية للمتصفحات المختلفة بحيث تتصرف الصفحة بشكل متسق عبر المتصفحات. ولكنها تحتوي عادةً على جميع السمات التي يحتاجها موقع ويب كبير. لا يتم استخدام بعض السمات مثل pre وcode وsub وdfn وvar وما إلى ذلك على الإطلاق لمواقع الويب العادية. احذف تلك التي لا يمكنك استخدامها. سيشجعك إريك ماير على أن تفعل الشيء نفسه!
سيساعد إطار العمل وإعادة التعيين في عملك بشكل جيد للغاية، ولكن إذا لم تقم بإزالة تلك الاستخدامات التي لا تحتاج إليها، فسيؤدي ذلك إلى انخفاض كفاءة صفحاتك وسهولة قراءتها.
5. الموسعة CSS
Stopdesign.com CSS بقلم Doug Bowman استخدم محددات خاصة للطبقات
هناك طريقة أخرى لتحسين التعليمات البرمجية الخاصة بك وهي الإعلان عن خصائص محددة لكل طبقة.
6. قم بتوثيق عملك
في التعاون الجماعي، من المهم للغاية توصيل معايير الكتابة ومعايير الترميز وطرق التعليق التوضيحي والأسلوب. وتستند القواعد على نهج متسق للمعايير. سيؤدي هذا إلى منع الآخرين من تكرار العمل الذي قمت به بالفعل ومنع توسيع التعليمات البرمجية.
7. استخدم الضغط
لتوفير المزيد من وقت التنزيل والتحميل للمتصفح، يعد الضغط حلاً جيدًا، ولكن فقط عند النشر. يعد YUI Compressor وCSSTidy خبراء في هذا المجال، حيث يمكنهم إزالة التعليمات البرمجية الزائدة والتحقق من الأخطاء عندما تتداخل الخصائص مع بعضها البعض.
يمكن للعديد من برامج التحرير الشائعة، مثل BBEdit وTextMate وTopStyle، مساعدتك في تنسيق كود CSS الخاص بك بالطريقة التي تريدها. يمكنك أيضًا استخدام PHP لمعالجة CSS الخاص بك من خلال تقنية ضغط الخادم. يمكنك العثور على المزيد من أدوات تحسين CSS وضغط CSS.
وفي مرحلة ما، قللت هذه الإجراءات من حدوث الأخطاء، لكنها لم تكن مثالية. وبالمثل، فمن الأفضل عدم استخدامها على الملفات التي تحتوي على اختراقات CSS. وهذا سبب آخر لتخزين الاختراقات في ملفات منفصلة.
ينهي
------------------------------------------------- ----------------------------------
لا يتعلق الكود النظيف والمحسن بحجم ملفك فحسب، بل يتعلق أيضًا بحجم ملفك سهولة الصيانة وسهولة القراءة. المبادئ المذكورة أعلاه لا تنطبق فقط على CSS، بل يمكن تطبيقها أيضًا على HTML وJavascript ولغات البرمجة الأخرى. ملفات CSS ليست مخصصة فقط للعرض التقديمي للمستخدم النهائي لموقع الويب الخاص بك. يمكن أن تساعد المبادئ المذكورة أعلاه في تجربة المستخدم بالإضافة إلى تجربة المطور. قم بتطبيق هذه المبادئ على مشاريعك المستقبلية وتأكد من تحقيق نتائج مهمة.