Tool zum Entfernen von nicht verwendetem CSS

Ich muss sagen, dass ich diese Option für besser halte als meine ursprüngliche Empfehlung; Meine ursprüngliche Empfehlung war großartig, um schnell nachzuschauen, dies ist besser zum Erstellen von Release-Paketen.

UnCSS und insbesondere das, worauf ich die Empfehlung stütze, ist The Grunt Wrapper for UnCSS ; das lässt sich natürlich für eine großartige Automatisierung in das Grunt -Build-System integrieren.

Es gibt einige Anpassungsoptionen ( auch im Detail aufgeführt ) und es unterstützt sowohl lokale als auch Remote-CSS-Dateien als Quellen.

Wenn Sie in Grunt verwenden, schlage ich vor, es zusammen mit grunt-processhtml zu verwenden, damit Ihre Seite(n) automatisch auf die neue(n) verkettete(n) und bereinigte(n) CSS-Datei(en) verweisen.

Wie ich es benutze: (ein Ausschnitt meiner gruntfile.js)

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uncss: {
        main: {
            options: {
                report: 'gzip'
            },
            files: {
                '<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
            }
        }
    },
    processhtml: {
        main : {
            options: {
                strip: false
            },
            files: [{
                expand: true,
                cwd: '',
                src: '<%= src_files_html %>',
                dest: '<%= grunt.option("outpath") %>'
            }]
        }
    }

und dann habe ich in meiner HTML-Datei Folgendes:

    <!-- build:css ./css/cleaned.min.css -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link href="./css/style.css" rel="stylesheet">
    <!-- /build -->

was umgewandelt wird in:

<link rel="stylesheet" href="./css/cleaned.min.css">

und das CSS ist viel kleiner und besser für Leistung und mobile Bandbreite.

Ich habe eine großartige Option - zumindest liebe ich sie total - obwohl es weder eine Web-App noch eine Linux-Anwendung ist.

Ich empfehle das Firefox-Addon CSS Usage – es erfordert Firefox und das Firefox-Addon Firebug .

Verwendungszweck:

• Laden Sie einfach die Seite (über Web, localhost (wie in meinem Bild) oder sogar nur das Dateisystem,
• Öffnen Sie die Firebug-Konsole und klicken Sie auf die Registerkarte CSS-Verwendung
• KlickenSCAN
• überprüfen und wenn Sie gesäubertes CSS exportieren möchten (nur aus dem Dateisystem funktioniert zuverlässig - obwohl dies eine kleine Korrektur für das Plugin sein sollte - was ich vielleicht irgendwann tun werde).

Leider hat das exportierte gesäuberte CSS einige Ärgernisse; Einige Regeln werden gelöscht (gut), aber einigen ist ein Präfix vorangestellt UNUSED..

Als Problemumgehung habe ich immer nur kopiert und in Notepad ++ eingefügt und das Suchen und Ersetzen mit dieser Regex als Suchzeichenfolge verwendet: UNUSED\..*?\}(und wählen Sie . matches newlines) und ein leeres Ersetzen, um sie einfach loszuwerden. - um dasselbe in Sublime zu tun, das Sie (?s)UNUSED\..*?\}als Regex verwenden würden. Die meisten anderen guten Texteditoren sollten ähnliche Funktionen haben.

Ich habe dieses browserbasierte Online - Tool zum Entfernen von unbenutztem CSS erstellt .

Merkmale:

1. Browserbasiert. Nichts zu installieren.
2. Prüft CSS gegen mehrere URLs.
3. Bietet Optionen zum manuellen Auswählen/Abwählen von Elementen in der CSS-Datei.
4. Kann für unbegrenzte URLs heruntergeladen und auf Ihrem lokalen Host ausgeführt werden
5. Open-Source-Code

Haftungsausschluss: Ich bin der Autor des Codes.

IntelliJ IDEA verfügt über einige leistungsstarke Webentwicklungsfunktionen :

• funktioniert mit Windows/Mac/Linux
• entdeckt unbenutzte CSS-Klassendefinitionen

Sie benötigen jedoch die Ultimate Edition, um Zugriff auf die Webentwicklungsfunktionen zu haben (kostenlos, wenn Sie der Projektleiter oder ein regelmäßiger Committer in einem Open-Source-Projekt sind).

Dafür haben wir ein kostenloses Online-Tool geschrieben: UnusedCSS

Es durchsucht rekursiv Ihre Website (folgt internen Links) und findet ungenutzte Selektoren (viele andere Tools verarbeiten nur eine Seite).

Ich habe das Firebug-Plugin CSS Usage bereits bei einigen Projekten verwendet – der einzige Nachteil ist, dass Sie Ihre gesamte Website manuell durchsuchen müssen, um eine genaue Karte der verwendeten Stile zu erhalten.

Sie erhalten jedoch vereinfachte Versionen Ihrer CSS-Dateien, mit denen Sie Ihre aktuellen Stylesheets ersetzen können.