So entfernen Sie nicht verwendete CSS-Regeln [geschlossen]

  

BEARBEITEN: Während mein spezifisches Problem mit dem Twitter Bootstrap zusammenhängt   System, die Lösung, die ich suche, muss nicht Twitter sein   Bootstrap-spezifisch, aber mehr eine Lösung für CSS-Stylesheets.

Ich fange an, die Welt von Twitter Bootstrap für ein aktuelles Projekt zu erforschen, an dem ich gerade arbeite. Ich benutze Bootstrap 3.3.6

Das Problem (warum habe ich das Problem unten)

Die grundlegende Bootstrap-CSS-Datei umfasst 6760 Zeilen sowie zusätzliche Dateien zum Hinzufügen eigener benutzerdefinierter CSS-Dateien zur Site. Insgesamt ergibt das, dass die Seite für jede Seite ~ 8700 Zeilen CSS (unminified) lädt.

Aber die auf die Website angewendeten Regeln verwenden nur ~ 700 dieser Zeilen. Das ist ein massiver Overhead für jede Seite, und selbst wenn das CSS in das .min.css -Format verkleinert wird, ist dies immer noch ein großer prozentualer Overhead.

Ich suche nach einer Möglichkeit, diesen Aufwand zu reduzieren, ohne die verwendeten Regeln aus den CSS-Dateien zu entfernen.

Was ich versucht habe (Und warum es nicht funktionierte oder unpraktisch ist)

Ich habe zuvor mit großem Erfolg die Firefox Dust-Me verwendet CSS-Refiner, der alle nicht verwendeten CSS-Regeln auf einer Seite oder sogar auf einer ganzen Site identifizieren kann.

Dies ist die Art von Dingen, die ich will, aber es hat zwei gravierende Nachteile:

• Es werden nur CSS-Regeln beibehalten, die auf der Seite für das verwendete Gerät / Medium verwendet werden (so sagt es mir beispielsweise, dass alle Regeln in der IE10 Viewport Bug Problemumgehung CSS-Datei werden nicht verwendet, da ich Firefox-Browser statt IE10 verwenden). Es berücksichtigt auch keine medienabfragespezifischen Regeln.

• Der andere Hauptnachteil für die Verwendung von Dust-Me (speziell, aber andere ähnliche Programme, die ich gefunden habe, haben ähnliche Defizite) ist, dass es mir nicht sagt, welche Regeln nicht verwendet werden eine Möglichkeit, das verwendete CSS aus den Quelldateien zu kopieren / einzufügen.

Ich habe mir auch ein paar andere CSS-Ersatzregel-Entferner und das Google Chrome-Entwickler-Audit angesehen Das ist nützlich, macht aber dasselbe, indem ich die nicht verwendeten Regeln im Textformat auflisten lasse, was kaum die Hälfte der Arbeit ist, nach der ich suche.

Das Problem (Warum brauche ich Ihre Hilfe, um dies zu lösen)

Ich bin also in der Lage, dass ich ein Google Chrome-Audit habe, das mir sagt, dass 88% von bootstrap.css und 65% von bootstrap-theme.css ungenutzt sind. Diese nicht verwendeten Elemente werden im Textformat aufgelistet, und es gibt Hunderte von ihnen. Derzeit kann ich nur sehen, dass ich auf jedem einzelnen finden / ersetzen müssen, entfernen sie [ die Regel-IDs ] aus der Quelle, bevor Sie dann durch die CSS-Datei gehen und alle Befehle entfernen, die nicht mehr habe irgendwelche Regeln.

Also frage ich das:

  

Was ist die beste Methode oder Ansatz für mich, das CSS von einer ganzen Website zu lesen, und   Gibt nur alle CSS-Regeln zurück, auf die in der Site verwiesen wird   werden nicht referenziert, werden nicht an den Operator zurückgegeben?

Ich kann dann die Ausgabe von dieser Funktion nehmen und sie dann minimieren und den massiven CSS Overhead des Bootstraps speichern.

Oder Gibt es eine völlig andere Art und Weise, dies zu tun, die ich nicht berücksichtigt habe?

Zusätzlich: Ich habe gelesen Wie unbenutzte Stile von Twitter Bootstrap entfernen? Das ist ähnlich zu dem, was ich frage, aber die richtige Antwort hier verweist auf eine Art Bootstrap-Auswahl, bei der ich auswählen kann, welche Stile ich vom Bootstrap nehme. Dies ist 2013 datiert und scheint Bootstrap Version 2 zu beziehen.

Außerdem verwende ich nicht Grunt und bin nicht mit Less vertraut. Entschuldigung: - /