يفحص تدقيق CSS حجم الأنماط وطريقة استخدامها ووزن المحددات، المعروف باسم specificity. تعني عبارة «غير مستخدم» أن القاعدة لم تُستخدم في حالة الصفحة التي خضعت للفحص. وقد تبقى ضرورية عند فتح قائمة أو تغيير عرض النافذة.
حدد الصفحات والتفاعلات التي ستفحصها
اختر صفحات تضم عناصر واجهة مختلفة، مثل ترويسة مشتركة وقائمة منتجات ونموذج إدخال. افحص أيضًا فتح القوائم وظهور أخطاء التحقق والتبديل بين علامات التبويب. استخدم عروض النافذة والتفاعلات نفسها قبل التعديل وبعده.
افحص صفحة عامة باستخدام CSS Scanner من Milten. سجّل ورقة الأنماط والملاحظات التي ظهرت. وأدرج الحالات التي لا يغطيها الفحص الآلي ضمن الاختبارات اليدوية.
لا تحذف CSS اعتمادًا على نسبة الجزء غير المستخدم وحدها
تأمل هذا المثال التوضيحي: تكون القائمة مغلقة عند تحميل الصفحة. قد لا تُستخدم أنماطها في البداية، لكنها تصبح ضرورية عند فتحها. اختبر التفاعل قبل أن تقرر أن القاعدة زائدة.
تشرح وثائق Coverage في Chrome DevTools كيفية تسجيل استخدام CSS وJavaScript أثناء التفاعل مع الصفحة. عدم استخدام قاعدة خلال تسجيل واحد لا يعني أنها غير مطلوبة في الموقع كله.
لكل قاعدة مرشحة للحذف، حدد ملف المصدر أو خطوة البناء التي تنتجها. عدّل المصدر وأعد البناء وتحقق من النتيجة، بدلًا من تعديل ملف مصغّر مباشرة.
افحص التكرار ووزن المحددات
قد تُطبَّق التصريحات المتكررة في ظروف مختلفة. افحص استعلامات الوسائط وحالات العناصر وترتيب التتالي. وبعد دمج القواعد، تأكد من أن العناصر نفسها ما زالت تتلقى الأنماط المقصودة.
مثال توضيحي آخر هو إضافة !important مرارًا لتغيير لون زر. افحص أولًا القواعد المتعارضة ووزن محدداتها. يساعدك دليل MDN إلى specificity على التعبير عن الأولويات المطلوبة في الشيفرة المصدرية.
افحص المظهر والتفاعل بعد النشر
أعد فحص عنوان URL بعد التعديل. اختبر الأزرار والنماذج والقوائم، إلى جانب مراجعة حجم الملف. وتحقق من التفاف النص ووضوح مؤشر التركيز على الأجهزة المحمولة والشاشات الكبيرة.
استخدم Design Tokens لفحص قيم الألوان والمسافات المشتركة. وإذا ارتبط خلل العرض بالترميز، فراجع دليل فحص HTML.
هل يؤدي حذف CSS غير المستخدم دائمًا إلى تسريع الصفحة؟
يتأثر الأداء أيضًا بترتيب التحميل ونقل الموارد وJavaScript. قارن نتائج Speed Scanner في الظروف نفسها لتعرف ما تغير فعليًا.
هل يكفي التحليل الآلي وحده؟
يجب أيضًا اختبار التفاعلات المهمة وعروض النافذة المختلفة. سجّل نطاق الفحص الآلي منفصلًا عن الحالات التي اختبرتها يدويًا.
افحص CSS لصفحة عامة. احتفظ بظروف الفحص الأصلية والملاحظات قبل إجراء أي تعديل.
