So optimieren Sie Ihr CSS
Es ist sehr wichtig, dass Sie Ihre CSS-Dateien klein und gut organisiert halten, vor allem, wenn Sie Ihre Website in Zukunft weiter bearbeiten (oder wenn andere den Code verwenden, z. B. Clients).
Hilfreich sind verschiedene Techniken, mit denen Sie Ihre CSS-Dateien organisieren und vergrößern können, um sie effizienter zu gestalten.
Wenn Sie mehr CSS verwenden, sparen Sie auf lange Sicht Zeit und Stress, also ist es wichtig, dass Sie es richtig machen.
Erstens, ein einziges Stylesheet, normalerweise style.css genannt, zu behalten, ist ein guter Ausgangspunkt für die Organisation Ihres CSS. Ein einziges Stylesheet für die Mehrheit (wenn nicht alle) Ihrer Website hält alles an einem Ort zusammen, was den Bearbeitungsprozess vereinfacht.
Code in Stil
Um Ihre CSS-Dateien effizienter zu gestalten, sollten Sie zunächst einen guten Code-Editor verwenden, z TextWrangler auf Mac, oder Notizblock ++ unter Windows. Dies hat eine Reihe von wesentlichen Vorteilen. Ein Programm wie TextWrangler ist nicht nur einfach zu bedienen, sondern codiert auch verschiedene Teile des Codes, die beim Fortschritt der Codierung helfen. Dies ist sehr nützlich, um sicherzustellen, dass jeder von Ihnen definierte Stil richtig geschrieben ist, da der Stil seine Farbe nur dann ändert, wenn er von TextWrangler als CSS-Stil erkannt wird. Registerkarten sind eine weitere gute Funktion von TextWrangler, mit der Sie mehr als eine Datei gleichzeitig öffnen können, wodurch die Gegenprüfung vereinfacht wird.
Um Ihre CSS-Dateien weiter zu optimieren, empfiehlt es sich, ein Set-Layout zu erstellen, das in allen CSS-Stylesheets verwendet wird. Vielleicht ist die am häufigsten verwendete Technik die Definition der ID oder Klasse (mit # oder.) Und dann eine offene Klammer {gefolgt von einer eingerückten neuen Linie, um mit dem Styling zu beginnen.
#header {width:500px;height:250px;}Indem Sie dieser häufig verwendeten Technik folgen, wird Ihr Stylesheet besser organisiert und einfacher zu programmieren sein. Die folgenden Techniken werden alle unterstützt, indem sichergestellt wird, dass das Layout in allen CSS-Dateien konsistent ist.
Nach Standort organisieren
Bei jeder Site kann die Anzahl der verwendeten CSS-IDs und -Klassen leicht eine große Anzahl erreichen. Daher ist es wichtig, dass Ihr CSS-Stylesheet gut organisiert ist. Eine der Techniken, die äußerst nützlich ist, besteht darin, Ihre IDs und Klassen nach dem Ort zu sortieren, an dem sie auf der Website selbst erscheinen. Beispielsweise; Platzieren Sie den CSS-Stil für die Kopfzeile oben im Stylesheet und das Styling für die Fußzeile nach unten. Wenn Sie dies bei allen Webseiten, die Sie beim Öffnen eines von Ihnen erstellten Stylesheets codieren, konsistent halten, wissen Sie genau, wo Sie suchen müssen, um den Stil zu finden, den Sie bearbeiten möchten.
Um die Organisation von Stilen weiter zu unterstützen, ist es ratsam, Ihre Elemente mit offensichtlichen Namen wie Kopfzeile, Fußzeile, Seitenleiste, Hauptinhalt usw. zu benennen, wodurch Sie herausfinden können, worauf sich jede Komponente bezieht, um die Organisation weiter zu unterstützen. Wenn Elemente ihren Zweck ändern, stellen Sie jedoch sicher, dass ihre Namen die Änderungen widerspiegeln. Ein Element mit dem Namen Header, das sich am unteren Ende der Seite befindet, kann sehr verwirrend werden und die Bestellung per Standort zu einer entmutigenden Aufgabe machen.
CSS-Kommentare
Dies führt zur Verwendung von CSS-Kommentaren in Ihren Stylesheets. Obwohl nicht immer verwendet, sind CSS-Kommentare sehr hilfreich, um verschiedene Teile des Stylesheets zu unterscheiden. Wenn Sie Ihre Stylesheets mit Stilen für die Kopfzeile nach oben und umgekehrt formatiert haben, können Sie CSS-Kommentare verwenden, um den Anfang und das Ende unterschiedlicher Abschnitte zu markieren, z. B. die Kopf- und Fußzeile oder die Hauptinhaltselemente.
Die Verwendung von CSS-Kommentaren ist einfach. Überall im Stylesheet starten Sie den Kommentar mit /* und dann beende den Kommentar mit */ . Entscheidend ist, dass alles im Kommentar, ob Code oder Text, nicht vom Browser geparst wird, wodurch CSS-Kommentare sehr nützlich sind, um Notizen und Beschreibungen zu verschiedenen Teilen des Stylesheets zu hinterlassen.
Vielleicht könnten zwei weitere Verwendungszwecke für CSS-Kommentare darin bestehen, Kommentare für Ihre Kunden zu hinterlassen. Sollten sie in Zukunft weitere Änderungen an ihrer Website vornehmen wollen, haben sie einen Leitfaden, der ihnen hilft. Es kann auch unterschiedliche Stile für dieselbe ID oder Klasse geben, die Sie für eine mögliche Verwendung oder für Tests beibehalten möchten. Anstatt IDs und Klassen mit einer 2 am Ende zu kennzeichnen, z header2 Um zu verhindern, dass das Styling geparst wird, einfach umhüllen, was wäre header2 im /* und */ .
Neben der besseren Organisation Ihres Stylesheets, da die Verwendung der "2 - Technik" leicht unordentlich werden kann, unterstützt diese Technik auch die Erstellung verschiedener Stylingversionen innerhalb des Stylesheets auf einfache Art und Weise mit einfacher Wiederverwendung (Kopieren und Einfügen statt Ändern von Zahlen und Löschen von altem Styling).
CSS-Kommentare sind zwar sehr nützlich, aber es ist auch wichtig, die Größe und Länge des Stylesheets zu beachten und entsprechend zu balancieren. Kommentare sollten nicht mehr Platz einnehmen als das eigentliche CSS; Sie sollten kurz und auf den Punkt gebracht sein. Es ist auch wichtig, dies in Bezug auf verschiedene Versionen zu berücksichtigen. Benötigen Sie wirklich alle Versionen, die Sie in Ihrem Stylesheet gespeichert haben? Können Sie ein dupliziertes Stylesheet anderswo speichern? Wenn Sie mehrere Stylestile in Ihrem Stylesheet verwenden, kann dies zu Verwirrung führen, so dass die Berücksichtigung von Alternativen von entscheidender Bedeutung ist, z. B. das Speichern doppelter Dateien.
Vermeide Dopplungen
Sobald das Stylesheet auf eine zugängliche Weise strukturiert ist, kann es leicht sein, unnötige Duplikate innerhalb des Stylings herauszusuchen. Aufgrund der Eigenschaften von CSS erben IDs und Klassen das Styling automatisch von ihren Eltern, wodurch die Notwendigkeit einer Verdoppelung des Stils entfällt. Am einfachsten ist es vielleicht, am Anfang des Stylesheets eine Reihe von Schlüsselstilen zu definieren. Das Definieren von universellen Stilen für Links und Text ist hilfreich und macht es überflüssig, das Styling für jede ID und Klasse ständig zu definieren. Insbesondere ist dies auch ein effektiver Weg, um einen einheitlichen Stil auf einer Website beizubehalten und wirkt sich positiv auf die Reduzierung der Größe des Stylesheets aus.
Mit einem Tool wie dem Inspektor von Google Chrome können Sie sehen, welche Stile von wo übernommen werden. Dies trägt zusätzlich zur Vermeidung unerwünschter Duplikate in Ihrem Stylesheet bei.
Verwenden Sie, was Sie brauchen
Anschließend, um Ihr CSS weiter zu optimieren, überlegen Sie, welche CSS-Klassen Sie implementieren. Musst du sie alle benutzen? Es ist leicht, sich hinreißen zu lassen und Klassen zu definieren, die man nicht direkt braucht, aber denkt, dass man das in Zukunft tun kann; Um das CSS-Stylesheet zu optimieren, verwenden kleine und organisierte CSS-Klassen nur die CSS-Klassen, die für das Funktionieren Ihrer Website wesentlich sind. Nur Code, was benötigt wird. Um dies zu erreichen, vermeiden Sie, wie bereits erwähnt, die Duplizierung von Stilen und vergessen Sie nicht verwendete Stile und solche, die nicht mehr relevant sind, zu löschen.
Fazit
Indem Sie diesen einfachen Techniken folgen, ist es möglich, besser organisierte und kleinere CSS-Dateien zu erstellen, die sowohl für Sie als auch für Ihre Kunden jetzt und in Zukunft einfach zu navigieren und zu bearbeiten sind.
Haben Sie gute Tipps, wie Sie Ihr CSS organisieren und optimieren können? Lass es uns in den Kommentaren wissen!