كيف يمكنني تحديد أنماط CSS غير المستخدمة وإزالتها من ورقة الأنماط المتضخمة الخاصة بي؟

Question

لدي ورقة أنماط قديمة مليئة الآن بالأنماط غير المستخدمة.المشكلة هي تحديد الضروري من غير الضروري.هل هناك أي أدوات للمساعدة في هذا؟

Answer 1

استخدام CSS هو إضافات Firefox رائعة. يمكنك تصفح صفحات متعددة وسينجح القواعد التي لم يتم استخدامها على أي منها - لذلك فهي أكثر دقة من الأداة التي تقوم بمسح صفحة واحدة.

Answer 2

يمكنك تجربة Firefox مختارون الغبار اضافه.

Answer 3

قم بتثبيت البرنامج المساعد لسرعة الصفحات من Google لـ firebug:

http://code.google.com/speed/page-speed/

ثم في Firebug، افتح علامة التبويب "سرعة الصفحة"، ومع تحديد "الأداء"، انقر فوق "تحليل الأداء".

إذا كانت لديك قواعد نمط غير مستخدمة في الصفحة الحالية، فبالإضافة إلى الكثير من الاقتراحات المفيدة الأخرى، سترى عنصر قائمة يسمى "إزالة Css غير المستخدمة".انقر لتوسيعه ورؤية تفاصيل قواعد CSS غير المستخدمة التي تظهر على الصفحة الحالية حسب المورد، بالإضافة إلى حجم الذاكرة الذي ستحفظه عن طريق إزالة القواعد غير المستخدمة.

هذه مجرد ميزة واحدة صغيرة في مجموعة أدوات سرعة الصفحة، والتي من المؤكد أنك تتعرف عليها إذا كنت مهتمًا على الإطلاق بأداء صفحتك من جانب العميل.

قد تكون مهتمًا أيضًا بـ yslow، وهي أداة مشابهة لـ Firebug تم تطويرها بواسطة Yahoo.

Answer 4

هذه أداة تسمى, ، "CSSCSS" يحدد أنماط مكررة:

واحدة من أفضل الاستراتيجيات بالنسبة لي للحفاظ على CSS هو تقليل الازدواجية قدر الإمكان. إنها ليست رصاصة فضية ، لكنها بالتأكيد تساعد.

للقيام بذلك ، تحتاج إلى الحصول على جميع القواعد في رأسك في جميع الأوقات. هذا صعب ، CSSCSS سهل. دعها تخبرك بما هو زائدة عن الحاجة.

Answer 5

هناك البرنامج المساعد مفيد حقًا للحركية المسمى uncss. سيقوم تلقائيًا بإزالة CSS غير المستخدمة على الطيران. راجع هذه الوصلة للمزيد من المعلومات:

قم بإزالة CSS غير المستخدمة تلقائيًا باستخدام Grunt

Answer 6

قم بإزالة CSS غير المستخدمة تلقائيًا باستخدام Grunt

gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'css/test.css' }
                ]
            }
        },
      cssmin: {
            dist: {
                files: [
                    { src: 'css/test.css', dest: 'cleancss/testmin.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks.
    grunt.registerTask('default', ['uncss', 'cssmin']);

};

Answer 7

npm install uncss -g

ثم

uncss http://example.com/ > out.css