CSS قاعدة أداة تنظيف

Question

لدينا العديد من ملفات CSS الضخمة التي أبقى فقط تنمو على مر السنين كلما تمت إضافة عناصر جديدة إلى نظامنا وكذلك صفحات JSP (التي تتضمن صفحات JSP الأخرى وهلم جرا) التي تشير إلى هذه الملفات.

نحن نعلم أن لدينا العديد من القواعد التي لم تعد تستخدمها وكثير منهم زائد.

أدوات جديدة فقط استمر في الخروج. هل هناك أداة (إلى جانب تلك الواضحة مثل APTANA و W3C's CSS Rostator) التي يمكنها تحليل دليل والمساعدات في تنظيف قواعد CSS وتحسينها؟

Answer 1

إنها مهمة صعبة ... خاصة إذا تم إنشاء محتوى HTML DOM الخاص بك على الطاير بأي شكل من الأشكال.

يعمل البرنامج المساعد من Dust-Me-Me-Selectors مفيدا، ولكن على أساس صفحة حسب الصفحة، لن يكون الكثير من المحددين غير مستخدم ... ولكن ليس غير صالح.

هناك بعض الحيل التي اعتدت عليها للمساعدة في التنظيف.

واحد تلو الآخر، أدخل بعض التصميم الرهيب الذي ستتمكن من اكتشافه على الفور لتحديد ما إذا كان يتم استخدام محدد. على سبيل المثال

border:6px dashed #ffaacc;
padding:12px;

أي شيء يجعله مع حدود زهرية سريعة متقطعة الآن ... هو محدد "نشط". إذا كنت تستطيع تصفح معظم موقعك / التطبيق دون رؤيته، فمن المحتمل أن "ميت".

(إذا تم إنشاء رمز CSS الخاص بك "، يمكنك تحسين هذا الاختبار بألوان مختلفة مرة واحدة، واستخدام المحتوى الناتج لإعداد" معرف "المحدد)

خيار آخر إذا كنت تستخدم نظام CSS الذي تم إنشاؤه ... هو إضافة خاصية نهائية إلى المحدد الخاص بك والتي تقولها مجموعات ... صورة خلفية مع عنوان URL الذي تم إنشاؤه. على سبيل المثال

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

ثم تقوم ببساطة بتصفح موقعك / تطبيقك مقابل أ

Answer 2

هناك محددات الغبار البرنامج المساعد ل Firefox، على الرغم من أنه ينظر إلى صفحة مصنوعة في المتصفح، بالطبع، ليس من خلال الدليل.

Answer 3

السيلينيوم يتيح لك أتمتة اختبار الصفحة وحدد العناصر عبر محددات CSS. إذا كنت تتراكم المباريات في جميع أنحاء الموقع، فستتمكن من تحديد العناصر التي لا مثيل لها.