4 أدوات لتدقيق وتحسين CSS
بمجرد أن يبدأ موقع الويب الخاص بك بالنمو ، ستزداد الشفرة. مع توسّع الكود ، قد يصعب الحفاظ على CSS فجأة ، وقد ينتهي بك الأمر إلى استبدال قاعدة CSS بأخرى. هذا يعقد الأشياء وربما ينتهي بك المطاف مع الكثير من الأخطاء.
إذا كان هذا يحدث لك ، فقد حان الوقت لك تدقيق CSS لموقعك. سيسمح لك تدقيق CSS بتحديد أجزاء CSS غير المحسّنة. يمكنك أيضًا تقليل حجم ملف ورقة الأنماط عن طريق إزالة سطور التعليمات البرمجية التي تؤدي إلى إبطاء أداء موقعك.
إليك 5 أدوات جيدة لمساعدتك في مراجعة CSS وتحسينه.
نوع، س ماتيتش
نوع، س ماتيتش هو مكون إضافي لـ Firebug لتحليل الخطوط المستخدمة في موقع ويب. يقدم هذا البرنامج المساعد تقريرًا مرئيًا في جدول ، يتضمن خصائص الخط مثل عائلة الخط ، والحجم ، والوزن ، واللون ، وكذلك عدد مرات استخدام الخط في صفحة الويب. من خلال جدول التقارير ، يمكنك بسهولة تحسين استخدام الخط أو إزالة ما هو غير ضروري أو دمج أنماط متشابهة جدًا.
المغلق لينت
المغلق لينت هو linting أداة تقوم بتحليل بناء جملة CSS استنادًا إلى معلمات محددة تتناول أداء CSS وإمكانية الوصول إليه وتوافقه. ستندهش من النتائج ، توقع الكثير من التحذيرات في CSS. ومع ذلك ، ستساعدك هذه الأخطاء في النهاية على إصلاح بناء جملة CSS ، وجعله أكثر فعالية. بالإضافة إلى ذلك ، سوف تكون أيضًا كاتب CSS أفضل.
المغلق ColorGuard
المغلق ColorGuard هي أداة جديدة نسبيا. تم تصميمه كوحدة Node ، ويتم تشغيله عبر جميع الأنظمة الأساسية: Windows و OS X و Linux. CSS ColorGuard هي أداة لسطر الأوامر تُعلمك إذا كنت تستخدم ألوانًا مماثلة في ورقة الأنماط الخاصة بك ؛ منها مثلا. # f3f3f3 قريب جدا من # F4F4F4, لذلك قد ترغب في النظر في دمج الاثنين. CSS ColorGuard قابل للتكوين ، يمكنك تعيين حد التشابه وكذلك تعيين الألوان التي تريد أن تتجاهلها الأداة.
المغلق حفر
المغلق حفر هو بيثون النصي ويعمل محليا على جهاز الكمبيوتر الخاص بك. سوف CSS حفر إجراء فحص شامل في CSS الخاص بك. سوف تقرأ وتجمع بين الخصائص ، على سبيل المثال جميع التصريحات لون الخلفية ستذهب تحت قسم الخلفية. وبهذه الطريقة يمكنك بسهولة اتخاذ القرارات بناءً على التقرير عند محاولة توحيد صيغة CSS الخاصة بك ، على سبيل المثال قد تجد اللون عبر الأنماط باستخدام إعلان اللون التالي.
اللون: #ccc؛ اللون: #cccccc؛ اللون: #CCC ؛ اللون: #CCCCCC ؛
هذه التصريحات اللون تفعل الشيء نفسه. قد تذهب كذلك مع #CCC أو مع العاصمة #CCC كمعيار. يمكن لـ CSS Dig كشف هذا التكرار لخصائص CSS الأخرى أيضًا ، وستكون قادرًا على جعل الكود الخاص بك أكثر تناسقًا.
