Reinigen Sie eine CSS -Codebasis

Sie sind gerade an Bord eines vorhandenen Projekts an Bord geworden, um einen abfahrten Entwickler zu ersetzen. Oder vielleicht haben Sie gerade dieses alte Projekt von vor ein paar Jahren eröffnet. Sie stehen vor Angst und Horror, wenn Sie sich den Code ansehen. Sie können nur eines tun: Aufräumen Sie dieses Chaos auf! Klingt dir das bekannt? Natürlich begegnen wir alle irgendwann irgendwann.

Sie wissen, dass das Aufräumen einer CSS -Codebasis eine enorme Aufgabe sein wird. Es gibt so viele Dinge zu tun, doch so wenig Zeit - besonders wenn der Kunde/Chef/Kollegen das gute alte Sprichwort „nicht reparieren, was nicht gebrochen ist“. Sie wissen nicht wirklich, wo Sie anfangen sollen!

Nun, Sie haben Glück, weil ich meinen Anteil an CSS-Aufräumarbeiten gemacht habe und ich hier einige Hinweise geben kann, um damit zu beginnen. Es geht nur darum, die niedrig hängenden Früchte zu greifen.

Key Takeaways

• Linke einer CSS -Codebasis ist der erste Schritt, um sie aufzuräumen, da sie potenzielle Fehler und schlechte Praktiken identifiziert. Tools wie SCSS-Lint können verwendet werden, um den SASS-Ordner auf Fehler zu überprüfen.
• Fixieren von Loting -Fehlern können erledigt werden, indem die Dateien nacheinander durchlaufen und das Aktualisieren des Falsches oder durch Verwendung von Such- und Ersetzen von Funktionen zur Behebung von gemeinsamen Problemen aktualisieren.
• Die Überarbeitung der Struktur der Codebasis ist entscheidend. Es spielt keine Rolle, welche Methodik ausgewählt wird, solange sie eingehalten ist. Dies könnte einen Umstrukturierungscode beinhalten, um eine ausgewählte Methodik einzuhalten oder wiederverwendbare Schnittstellenbrocken zu identifizieren und ihre Stile in ihre eigenen Teils zu extrahieren.
• Das Entfernen von überschüssigem Code ist der Schlüssel zu guten CSS. Unbenutzte Erklärungen können technische Schulden stapeln. Daher ist es wichtig, regelmäßig zu prüfen, ob jede CSS -Deklaration einen Einfluss hat, und wenn nicht, entfernen Sie sie.
• regelmäßig Arbeiten und logischerweise bündelnde Veränderungen in kleinen Commits erleichtert es, in die Geschichte zurückzukehren, wenn etwas schief geht. Dies ist besonders wichtig, wenn Sie eine CSS -Codebasis neu aufstellen, da es wahrscheinlich ist, dass einige Dinge auf dem Weg brechen.

Lint zum Teufel raus

In diesem Abschnitt gehe ich davon aus, dass Ihre Codebasis SASS verwendet. Nicht nur, weil es heutzutage eine vernünftige Annahme ist, sondern auch, weil ich festgestellt habe, dass die schlechte Verwendung von SASS oft teilweise für eine unordentliche Codebasis verantwortlich ist. Trotzdem ist dieser Artikel für Sie möglicherweise relevant, auch wenn Sie keinen Präprozessor verwenden. Tragen Sie also bitte mit mir.

Das erste, was ich gerne mache, wenn ich eine Codebasis übernehmen muss, ist FINT. Das Lining ist der Prozess des Ausführens eines Programms, das nach potenziellen Fehlern und schlechten Praktiken sucht. Ich glaube, dass es der erste Schritt ist, den Code sauber zu machen, um den Code gut zu machen. Hier ist ein aufschlussreicher Stapelüberlauf -Thread über die Etymologie des Wortes „Lint“.

SASS verfügt über einen Ruby-basierten Linter namens SCSS-Lint. Sie können es selbst konfigurieren oder die empfohlene Konfigurationsdatei von Sass-Guidelines abrufen, um sofort loszulegen. Es gibt auch eine Node.js-Version namens Sass-Lint, obwohl sie nicht 100% interoperabel sind, sodass Ihre Kilometerleistung variieren kann.

Versuchen Sie, SCSS-Lint in Ihrem Sass-Ordner auszuführen, um auf Fehler zu suchen. Die Chancen stehen gut, dass Sie mit einer Fehlerwand überwältigt werden. Dies ist normalerweise die Zeit, in der Sie versucht sind, aufzugeben. Aber tragen Sie es mit mir! Zu diesem Zeitpunkt können Sie entweder versuchen, Ihre Lining -Datei in Bezug auf Regeln, die Ihnen egal sind, etwas weniger streng zu machen, oder Sie können das Tier vorne angehen und die Hölle aus dem Höllen aus der Hölle herausholen!

Fixierungsstundenfehler gefunden

Es ist Zeit zu beheben, was behoben werden muss. Es gibt zwei Möglichkeiten, dies zu tun. Die erste besteht mit ein wenig Suche und Ersetzen. Ich weiß nichts über dich, aber ich liebe reguläre Ausdrücke, also macht es immer ziemlich viel Spaß, wenn ich das tun muss.

Angenommen, Sie möchten beispielsweise die fehlende führende Null vor allen schwimmenden Punktzahlen hinzufügen (d. H. Einen numerischen Wert zwischen 0 und 1)-die führende Regel von SCSS-Lint. Sie können nach s. (D) suchen (alle Zahlen, die einem Platz und einem Punkt folgen) und ihn durch 0 $ 1 (ein Speicherplatz, ein Null, einen Punkt und die gefundene Zahl) ersetzen. Oder wenn Sie die Randzero-Regel für SCSS-Lint ehren möchten, können Sie Grenze ersetzen: Keine mit Grenze: 0 in Ihrer IDE. Einfach wie Kuchen!

Ich habe kürzlich das SCSS-Lint-Regex-Repository auf GitHub gestartet, um diese regulären Ausdrücke an einem Ort zu sammeln. Schauen Sie sich unbedingt an, wenn Sie mit der Linie eines großen Projekts zu kämpfen haben. Achten Sie auch vor der Suche und Ersetzen, da es manchmal unerwartete Nebenwirkungen hat. Achten Sie nach jedem Ersatz, um einen Git -Diff durchzuführen, um zu überprüfen, was aktualisiert wurde, damit Sie sicherstellen können, dass Sie keinen Fehler eingeführt haben.

Sobald Sie mit einer Transversal -Bearbeitung fertig sind, entkommen Sie nicht der manuellen Datei, die alles gereinigt hat, um alles zu reinigen, was gereinigt werden muss (schlechte Eindrücke, fehlende oder zusätzliche leere Linien, fehlende Räume usw.). Es dauert viel Zeit, aber es wird für den nächsten Schritt viel helfen, daher ist es wichtig, damit zu beginnen.

Überarbeiten Sie die Struktur

Was ich oft beunruhigend finde, wenn ich zu einem vorhandenen Projekt bin, ist das Fehlen einer ordnungsgemäßen Projektarchitektur. Es gab wahrscheinlich ganz zu Beginn eines, aber die Dinge geraten normalerweise außer Kontrolle und diese kurze Idee der Methodik ging irgendwo auf der Linie verloren. Trotzdem ist das unglaublich wichtig.

Es spielt keine Rolle, welche Methodik Sie wählen, solange Sie sich damit wohl fühlen und sich daran halten. Es könnte SMACSS sein, es könnte 7-1 sein, es könnte ITCSS-wählen Sie Ihre Wahl! Versuchen Sie dann, Dinge umzustrukturieren, um den Code für die ausgewählte Methodik konform zu machen. Ich verwende meistens das 7-1-Muster, das in Sass-Richtlinien eingeführt wurde. Ich gebe Ihnen also ein paar Tipps, um die Dinge zu verbessern, wenn Sie sich für diesen Weg entscheiden.

Beginnen Sie mit dem Ordner Anbieter , da er keine Fragen stellt. Bewegen Sie eine nicht verpackte Bibliothek von Drittanbietern in die Bibliothek (dh jede Bibliothek, die nicht als regelmäßige Abhängigkeit über NPM oder Bundler behandelt wird).

Fahren Sie dann mit dem Ordner Abstracts fort. Stellen Sie sicher, dass alle Variablen, Mixins, Funktionen und Platzhalter des Projekts dort definiert sind. Fühlen Sie sich frei, es so zu organisieren, wie Sie es hier haben möchten, solange Sie nicht mit Variablen und Mischungen in allen Dateien der Codebasis enden. Zu diesem Zeitpunkt neige ich auch dazu, nach unnötigen Variablen (und Mischungen) zu suchen. In der Tat finde ich oft unzählige Variablen, die nur ein- oder zweimal verwendet werden (mit anderen Worten, es lohnt sich nicht).

Sobald Sie damit fertig sind, ist es Ihr Anruf. Sie können entweder versuchen sicherzustellen Insgesamt lebt Layout dort und ist korrekt dokumentiert. Schließlich müssen Sie die -Komponenten in Angriff nehmen, was wahrscheinlich eine kolossale Aufgabe ist. Mein Rat hier wäre, zu versuchen, Komponenten so klein und wiederverwendbar wie möglich zu gestalten. Es spielt keine Rolle, ob Sie die Zahl verdoppeln, solange Sie sie kontext assern und leicht zu lesen, zu verstehen und zu aktualisieren können.

Zum Beispiel ist es keine schlechte Sache, eine so kleine Komponente zu haben:

denken modular. Klein. Einfach. Unabhängiger.

Entfernen Sie den überschüssigen

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Ich glaube, der größte Unterschied zwischen gutem und schlechter CSS ist die Menge an Code, die erforderlich ist, damit es funktioniert. CSS als Sprache ist ziemlich leicht zu verstehen. Jeder könnte so ziemlich jedes Layout mit ein wenig Versuch und Irrtum machen. Allerdings ist es eine echte Herausforderung, etwas mit dem nackten Minimum an CSS zu bauen, damit es funktioniert, und um es so zu halten.

Es ist über 3 Jahre vergangen, aber dieser Tweet von Nicolas Gallagher bleibt mein Lieblingszitat zu CSS:

Innerhalb von "schlechten" CSS ist es sehr schwierig, "gute" CSS zu schreiben. Innerhalb des „guten“ CSS ist es sehr einfach, „schlechte“ CSS zu streichen und Code -Rot zu initiieren.

- Nicolas (@necolas) 26. September 2012

Veralterung ist die wirkliche Pest von CSS. Wenn wir etwas mit CSS bauen, gehen wir oft hin und her und versuchen ein paar Dinge - bis zu dem Punkt, an dem wir normalerweise ein paar nicht benötigte Erklärungen haben. Zum Beispiel ein Überlauf: versteckt, der unnötig wurde, oder eine Schriftgröße, die keinen Unterschied macht. Indem wir sie verlassen, stapeln wir technische Schulden. Das ist schlecht ™.

Wenn CSS das Schreiben von CSS, die ich gerne mache, bevor ich ein Stück CSS -Arbeit begangen habe, wird die Entwickler -Tools geöffnet und jede CSS -Erklärung umgeschaltet, die ich geschrieben habe, um festzustellen, ob sie jeweils einen Einfluss haben. Wenn sie es nicht tun, frage ich mich, warum sie überhaupt dort sind. Wenn sie sich als unnötig herausstellen, entferne ich sie. Wenn ich etwas so Einfaches mache, stelle ich sicher, dass nur nützlicher Junk-Free-Code in das Repository gedrückt wird.

Aufräumen Eine CSS -Codebasis ist nicht anders. Suchen Sie eine Komponente, die Sie aufräumen möchten, die Devtools öffnen und versuchen, nutzlose Erklärungen zu finden. Manchmal müssen wir einige Styles oben im Baum bewegen, um von der Kaskade zu profitieren. Betrachten Sie das folgende Beispiel auf das nötige Minimum:

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Eine saubere Möglichkeit, dies zu optimieren, wäre, die Farbe zu verschieben: rote Deklaration an den Elternteil und lassen Sie die Kaskade den Rest erledigen. Natürlich sind Beispiele im wirklichen Leben normalerweise komplexer, aber das zeigt, wie wir manchmal vergessen, das c in *c *ss.

zu nutzen

CSS ist klug, Sie sollten zu

sein

Eine Sache, auf die ich oft stoße, ist das mangelnde Verständnis der Erb-, anfänglichen und aktuellen Color -Werte. Angenommen, Sie möchten, dass Ihre Links die gleiche Farbe haben wie der Kerntext (weil die Unterstreichung ausreicht). Das Folgende ist eine schlechte -Stumweise:

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

Der Grund, warum es sich um eine schlechte Lösung handelt, sollte offensichtlich sein: Wenn Sie die Farbe der Körperkopie ändern, wird die Linkfarbe deSynchronisiert. Wenn Sie eine Variable verwenden möchten, machen Sie die Dinge unnötig komplex. Wenn ein Link in einem grauen Absatz (zum Beispiel in einem Blockquote) landet, passt er nicht mit der Farbe überein!

cs

<span>a {
</span>  <span>color: black; /* Nope */
</span><span>}</span>

Es ist so einfach. Dank dessen werden Links immer die Farbe ihrer Eltern erben. Das könnte auch die Farbe seiner Vorfahren erben und so weiter.

In der gleichen Richtung ist es eine schlechte Idee, einen Hardcode-Wert zu einer schlechten Idee zu erhalten. CSS hat den anfänglichen magischen Wert genau für ein solches Szenario. Obwohl es normalerweise keinen Unterschied macht, gibt es Fälle, in denen es wirklich wichtig ist, wie bei richtungsbasierten Eigenschaften wie Text-Align. Beim Zurücksetzen von Text-Align kann das Linken der Linken für RTL-Sprachen schädlich sein. Initiale wäre der richtige Weg (oder noch besser, aber dieser Wert hat keine Unterstützung in IE9).

Zu guter Letzt ist die Anzahl der CSS -Entwickler, die nicht wissen, dass CurrentColor zu hoch ist. Wenn Sie nichts davon wissen, fühlen Sie sich nicht schlecht, aber fragen Sie sich Folgendes: Wie kommt es, dass sie, wenn sie keine Grenzfarbe angibt, automatisch der Farbe des Elements übereinstimmt? Dies geschieht, da der Standardwert für die Grenzfarbe aktuell ist (überprüfen Sie die Spezifikation). Ein ziemlich offensichtlicher Name, werden Sie zugeben.

Mein Punkt ist, wenn Sie möchten, dass etwas die Farbe mit der Schriftart eines Elements teilen, verwenden Sie CurrentColor anstelle eines hart codierten Werts oder einer SASS-Variablen.

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

all diese Dinge sind grundlegende CSS -Funktionen. Sie sind das, was CSS zu dem macht, was es ist. Trotzdem sind sie unglaublich unterzogen. Wenn Sie also den Code einer Komponente verbessern müssen, sind dies die Art von Verbesserungen, die Sie vornehmen möchten.

Holen Sie sich Ihr Git gut

Refactoring einer CSS -Codebasis ist viel von der Arbeit. Sie werden wahrscheinlich Dutzende und Dutzende von Dateien aktualisieren. Sie werden auch wahrscheinlich die Dinge auf dem Weg brechen. Seien wir ehrlich, wir alle machen Fehler, und wenn es mit so großen Veränderungen zu tun hat, wäre es sehr beeindruckend, wenn es Ihnen gelungen wäre, alles ohne einen winzigen Fehltritt zu reinigen.

Aus diesem Grund empfehle ich Ihnen dringend, mit Ihrer Versionskontrolle sehr eifrig zu werden (ich denke, es ist fair, hier Git anzunehmen). Das bedeutet, dass Commits eine Sache und eine Sache nur so tun, dass es möglich ist, auf einen Schritt zurückzukehren, der einen Fehler enthält, ohne wie die Hölle mit Konflikten zu kämpfen.

Ich weiß, dass für viele Menschen Git hart und dunkel ist, und es ist weit außerhalb des Rahmens dieses Artikels, wie man es einfach macht. Sie müssen mir dies jedoch vertrauen: Machen Sie Ihre Git -Geschichte zu einem Gedicht, wenn Sie nicht wütend werden möchten.

wickeln Sie es

ein

Lassen Sie uns zusammenfassen und ein wenig tl; dr für die faulen Leser:

Reinigen eines CSS/SASS -Projekts ist schwierig, da es schwierig ist, die Auswirkungen der Aktualisierung oder Entfernung einer CSS -Linie zu bewerten. Dies liegt hauptsächlich daran, dass CSS kaum überprüfbar ist. Aus diesem Grund muss man vorsichtig sein.

Beginnen Sie mit dem Leinen Ihres Codes, damit er hübsch wird. Beginnen Sie damit, damit sich Ihr Leben später leichter erleichtert. Dies ist auch ein guter Weg, um einen wertvollen Überblick über den Zustand der Codebasis zu erhalten, ohne viel zu riskieren (das Fixieren syntaktischer Schmutz ist wahrscheinlich keine Probleme).

Stellen Sie als nächstes sicher, dass Ihr Projekt eine Strukturmethode umfasst. Es spielt keine Rolle, welches, solange es richtig gemacht wurde. Wenn Ihr Projekt nicht wirklich in Komponenten orchestriert ist, wäre dies eine gute Gelegenheit, auf diesem Weg zu beginnen. Finden Sie wiederverwendbare Schnittstellenbrocken und extrahieren Sie ihre Stile in ihre eigenen Teils. Fühlen Sie sich frei, sie ein wenig zu dokumentieren, damit es einfacher wird und Sie ein Fortschrittsgefühl erhalten.

Sobald Sie das Projekt aufgeräumt haben und alles an den richtigen Ort gebracht haben, ist es an der Zeit, das CSS selbst zu verbessern. Überprüfen Sie, ob Sie zuerst die Dinge entfernen können. Wir schreiben oft viel zu viel Code. Versuchen Sie dann, den Code zu optimieren, damit er weniger wiederholt ist. Achten Sie darauf, dass Sie jedoch nicht zu übergießen sind! Sie sollten Komplexität entfernen und nicht hinzufügen. Fühlen Sie sich auch frei, alles zu kommentieren, was Sie tun, das auf den ersten Blick nicht offensichtlich erscheint.

Beachten Sie schließlich Ihre Arbeit regelmäßig und logisch. Bündeln Sie Ihre Änderungen in kleinen Commits, die jeweils eine einzige Sache machen, also ist es einfach, in die Geschichte zurückzukehren, wenn etwas schief geht.

zuletzt, aber nicht zuletzt vergessen Sie nicht zu feiern, wenn Sie fertig sind. Viel Glück!

häufig gestellte Fragen (FAQs) zum Reinigen einer CSS -Codebasis

Was ist die Bedeutung der Reinigung einer CSS -Codebasis? Erstens verbessert es die Lesbarkeit des Codes und erleichtert es anderen Entwicklern, zu verstehen und zu arbeiten. Zweitens verbessert es die Leistung der Website oder Anwendung, da unnötiger oder redundanter Code entfernt wird. Dies kann zu schnelleren Ladezeiten und zu einer besseren Benutzererfahrung führen. Zuletzt ist eine saubere Codebasis leichter zu warten und zu debuggen, um Zeit und Ressourcen auf lange Sicht zu sparen.

Wie kann ich redundante oder unnötige CSS -Code identifizieren? Helfen Sie mit, nicht verwendeten oder überflüssigen CSS -Code zu identifizieren. Dazu gehören Browser -Entwickler -Tools, CSS -Deckungs -Tools und verschiedene Online -Dienste. Darüber hinaus kann manuelle Code -Überprüfung auch von Vorteil sein, insbesondere zur Identifizierung von Entlassungen oder Inkonsistenzen im Code. Eine CSS -Codebasis umfasst das Entfernen von nicht verwendeten oder redundanten Code, das Organisieren von Code logisch und konsistent, Kommentare zur Erläuterung komplexer Codeabschnitte und das Einhalten an a Konsequente Namenskonvention. Darüber hinaus kann die Verwendung eines CSS -Präprozessors bei der Verwaltung und Verwaltung großer Codebasen helfen. Übungen. Dies beinhaltet das Schreiben modularer, wiederverwendbarer Code, die Einhaltung einer konsistenten Namenskonvention und die Verwendung von Kommentaren zur Erläuterung komplexer Codeabschnitte. Darüber hinaus können regelmäßige Codeüberprüfungen dazu beitragen, Probleme frühzeitig zu fangen, bevor sie zu größeren Problemen werden. Reinigen Sie eine CSS -Codebasis. Es ermöglicht die Verwendung von Variablen, Verschachtelung, Mixins und anderen Funktionen, mit denen der Code lesbarer und wartbarer werden kann. Darüber hinaus kann es dazu beitragen, Aufgaben wie Minification und Autoprefixing zu automatisieren und die Sauberkeit und Effizienz der Codebasis weiter zu verbessern.

Wie verbessert das Reinigen einer CSS -Codebasis die Website der Website? Dies kann zu schnelleren Ladezeiten und einer glatteren Benutzererfahrung führen. Durch das Entfernen unnötiger oder redundanter Code kann die Wahrscheinlichkeit von Konflikten oder Fehler verringert werden, die die Leistung beeinflussen könnten. Auswirkungen SEO. Schnelle Lastzeiten, die durch Reduzieren der Menge an unnötigen oder redundanten Code erreicht werden können, sind ein Faktor in der Suchmaschinenrangliste. Darüber hinaus kann eine saubere, gut strukturierte Codebasis Suchmaschinenbots erleichtern, die Site zu kriechen und zu indizieren. 🎜> Es stehen mehrere Tools zur Verfügung, mit denen die Reinigung einer CSS -Codebasis automatisiert werden kann. Dazu gehören CSS -Präprozessoren, Linter und Minifikatoren. Darüber hinaus gibt es Online -Dienste, die Ihre Codebasis analysieren und Verbesserungsbereiche identifizieren können.

Wie oft sollte ich meine CSS -Codebasis aufräumen? , einschließlich der Größe der Codebasis, der Anzahl der daran arbeitenden Entwickler und der Komplexität des Projekts. In der Regel sollten jedoch regelmäßige Code -Überprüfungen und -Reinigungen Teil des Entwicklungsprozesses sein, um sicherzustellen, dass die Codebasis sauber und wartbar bleibt. > Die Reinigung einer CSS -Codebasis kann eine komplexe Aufgabe sein, insbesondere für große Legacy -Codebasen. Zu den Herausforderungen können die Identifizierung unbenutzter oder redundanter Code, die Aufrechterhaltung der Kompatibilität mit älteren Browsern gehören und sicherstellen, dass die Änderungen nicht die vorhandenen Funktionen brechen. Darüber hinaus kann es zeitaufwändig sein, insbesondere ohne die Verwendung von Tools, um den Prozess zu automatisieren.

Das obige ist der detaillierte Inhalt vonReinigen Sie eine CSS -Codebasis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!