Ich habe gerade diesen neuen Job begonnen, wo ich als Designer die CSS-Datei für unsere Web-App verwalten muss. Im Moment umfasst es fast 7000 Zeilen, wiegt über 160kb und hat Hunderte von wichtigen Regeln.
Ich möchte die Datei neu organisieren, in Unterabschnitte aufteilen, sie bereinigen und ihre Syntax homogenisieren.
Aber es scheint ein großes Unterfangen zu sein und die Datei und die App sind so groß und komplex, dass ich mich frage, ob es überhaupt machbar ist, ohne etwas zu zerstören (und es nicht zu sehen).
Ich habe die Datei mit Online-Tools überprüft und es scheint, dass ich eine Art automatisiertes Refactoring verwenden kann, ohne zu viel Risiko einzugehen. Ich habe auch ein paar Tools ausprobiert, um zu prüfen, ob Selektoren tatsächlich verwendet werden, das Problem ist, dass diese Web-App komplett in Javascript geschrieben ist, also ist die ganze Sache dynamisch und normale Werkzeuge sind praktisch unbrauchbar (keine richtigen Links folgen, keine Sitemap) usw.)
Haben Sie irgendwelche Empfehlungen, wie Sie vorgehen sollen, wo Sie anfangen sollen und ob es sich überhaupt lohnt?
Refactoring solch ein riesiges Stück Code wird extrem zeitaufwendig und schwierig sein, hier ist mein 2p wert, aus meiner Erfahrung:
starten Sie die Verzweigung des Projekts (hier nehme ich an, dass Sie ein Versionskontroll-Tool verwenden) - damit können Sie unabhängig mit dem Code spielen und einen Meilenstein markieren, den Sie erreichen.
formatieren Sie Ihr CSS mit einem Beautifier - es erhöht die Lesbarkeit und hilft bei der Suche nach bestimmten Deklarationen, ohne dass Instanzen fehlen.
versuche unbenutztes / redundantes CSS zu identifizieren und es loszuwerden.
Sie könnten versuchen, Ihre Selektoren kürzer zu machen (zB .main .foo .bar könnte in Ordnung sein als .bar ) - es verbessert die Lesbarkeit und erhöht die Leistung, aber nehmen Sie dies mit einer Prise Salz und seien Sie bereit zu gehen zurück, wenn die Dinge bei jedem Schritt zu brechen beginnen.
versuchen, wenn möglich% !important zu eliminieren - machen Sie den Selektor bei Bedarf spezifischer. Ein CSS-Reset könnte dabei helfen, wenn die meisten !important -Anweisungen gemacht wurden, um browserspezifische Probleme zu beheben. Anderenfalls könnte das Hinzufügen eines CSS-Resets jetzt möglicherweise mehr Probleme hinzufügen als das Lösen - wenn in Ihrer App kein CSS zurückgesetzt wird überhaupt.
zerlegen und gruppieren Sie die CSS in verschiedene Module (und Dateien, wenn das hilft) - Objektorientierte CSS ist eine mögliche Technik, um Dinge wartungsfreundlicher zu halten, es funktioniert am besten, wenn Sie damit beginnen, aber es kann Ihnen auch helfen Refactoring. Ссылка ist zwar gültig, aber es gibt Alternativen, die Sie in Erwägung ziehen können, wie SMACSS .
Danach sollten Sie einen css-Präprozessor wie Less oder Sass verwenden, mit dem Sie Variablen und Mixins definieren können (ähnlich zu Funktionen), Modularität und vielem mehr - dies kann jedoch eine sehr teure Aufgabe sein, also beurteile sorgfältig, ob dir das mehr bringt als Schmerz.
Testen Sie so oft und so oft wie möglich Unit-Tests, um sicherzustellen, dass alle Änderungen, die Sie vornehmen, nirgendwo anders funktionieren.
Manchmal ist es weniger zeitaufwändig, alles neu zu schreiben, als das Refactoring. Also haben Sie keine Angst, die Dinge so zu belassen, wie sie sind, wenn Ihre Bewertung zeigen wird, dass Refactoring nicht genug bringt.
Was Sie vor sich haben, ist eine der schwierigsten Aufgaben, also viel Glück damit!
Sie müssen den gesamten Code durchsehen und verstehen. Sie können nicht versuchen, es durch einige automatisierte Dienstprogramme zu führen und es für Sie arbeiten zu lassen. Kompakte CSS zu schreiben ist eine Kunst, und Sie können keine Verknüpfungen verwenden, sonst wird Ihre Datei über 160 KB groß.
Auf der anderen Seite können Sie von vorne anfangen und Ihre Stile grob auf dem Original basieren.
Was ich jedoch empfehlen würde, ist die Verwendung eines "Inspect Element" - Programms wie Firebug in Firefox, um zu sehen, ob es überflüssige Stile gibt.
Versuchen Sie auch, Stile, die auf mehreren Seiten erscheinen, in eine allgemeine CSS-Datei und andere in bestimmte Dateien aufzuteilen.
Zuerst würde ich empfehlen, einen CSS-Präprozessor zu verwenden. Zum Beispiel können Sie LESS verwenden. Gestalte deine CSS zunächst mit Ссылка mit deinen benutzerdefinierten Optionen und füge sie dann in Ссылка . Möglicherweise müssen Sie einige Änderungen vornehmen, um den Code zu "modularisieren".
Dann können Sie Codeschnipsel entfernen, die nicht auf jeder Seite erscheinen und sie manuell an der Stelle laden, an der sie benötigt werden.
Kompiliere CSS von LESS und benutze es.
Bearbeiten:
Ihr CSS könnte also so aussehen:
%Vor%Übernehmen Sie css2less:
%Vor%Und modularisieren Sie es:
main.less
%Vor%register.less
%Vor%Ich würde von vorne anfangen
Löschen Sie zuerst den Stil mit der Ссылка CSS-Tabelle, um die Notwendigkeit für alle wichtigen Regeln zu entfernen die Stilunterschiede zwischen Browsern.
Verwenden Sie dann möglicherweise so etwas wie Ссылка , um ein dynamisches Stylesheet zu erstellen.
Suchen Sie nach gemeinsamen Elementen und verwenden Sie eine gemeinsame Klasse für diese Elemente.
Selbst in den komplexesten Anwendungen sollten Sie kein 7000-Zeilen-Stylesheet benötigen.
Tags und Links css syntax maintenance