So optimieren Sie Ihr CSS

Es ist sehr wichtig, Ihre CSS-Dateien klein und organisiert zu halten, insbesondere wenn Sie in Zukunft Zeit damit verbringen, Ihre Website zu bearbeiten (oder wenn andere den Code verwenden, z. B. Kunden). Hilfreicherweise gibt es eine Reihe verschiedener Techniken, mit denen Sie die Organisation und Größe Ihrer CSS-Dateien verbessern und sie effizienter gestalten können. Ein optimierteres CSS spart Ihnen auf lange Sicht Zeit und Stress, daher ist es wichtig, es richtig zu machen. Erstens ist die Beibehaltung eines einzelnen Stylesheets, das normalerweise „style.css“ heißt, ein guter Ausgangspunkt für die Organisation Ihres CSS. Wenn Sie für den Großteil (wenn nicht alle) Ihrer Website ein einziges Stylesheet haben, bleibt alles an einem Ort zusammen, was den Bearbeitungsprozess rationalisiert.

Code mit Stil

Um Ihre CSS-Dateien effizienter zu gestalten, ist es wichtig, zunächst einen guten Code-Editor zu verwenden, z TextWrangler auf Mac, oder Notepad++ unter Windows. Dies hat eine Reihe entscheidender Vorteile. Ein Programm wie TextWrangler ist nicht nur einfach zu verwenden, sondern kodiert auch verschiedene Teile des Codes farblich, was den Codierungsfortschritt erleichtert. Dies ist sehr nützlich, um sicherzustellen, dass jeder von Ihnen definierte Stil korrekt geschrieben ist, da der Stil seine Farbe nicht ändert, es sei denn, er wird von TextWrangler als CSS-Stil erkannt. Tabs sind eine weitere gute Funktion von TextWrangler, mit der Sie mehr als eine Datei gleichzeitig geöffnet lassen können, was die Gegenprüfung erleichtert. Um Ihre CSS-Dateien weiter zu optimieren, empfiehlt es sich, ein festes Layout festzulegen, das in allen Ihren CSS-Stylesheets verwendet wird. Die vielleicht am häufigsten verwendete Technik besteht darin, die ID oder Klasse zu definieren (mit # bzw. .), dann eine offene Klammer { gefolgt von einer eingerückten neuen Zeile, um mit der Formatierung zu beginnen, etwa so: #header { width:500px; Höhe:250px; } Wenn Sie dieser häufig verwendeten Technik folgen, wird Ihr Stylesheet besser organisiert und lässt sich einfacher programmieren. Die folgenden Techniken werden alle dabei helfen, sicherzustellen, dass Ihr Layout in allen CSS-Dateien konsistent ist.

Lesen:  Wie wählen Sie die besten Schlüsselwörter für Ihre Website aus?

Nach Standort organisieren

Auf jeder Website kann die Anzahl der verwendeten CSS-IDs und -Klassen leicht eine große Zahl erreichen. Daher ist es wichtig, dass Ihr CSS-Stylesheet gut organisiert ist. Eine der äußerst nützlichen Techniken besteht darin, Ihre IDs und Klassen danach zu ordnen, wo sie auf der Website selbst erscheinen. Zum Beispiel; Platzieren Sie den CSS-Stil für die Kopfzeile oben im Stylesheet und den Stil für die Fußzeile unten. Indem Sie dies auf allen Websites, die Sie programmieren, konsistent halten, wann immer Sie ein von Ihnen erstelltes Stylesheet öffnen, wissen Sie genau, wo Sie nach dem Stil suchen müssen, den Sie bearbeiten möchten. Um die Organisation von Stilen weiter zu erleichtern, ist es außerdem ratsam, Ihre Elemente mit offensichtlichen Namen wie Kopfzeile, Fußzeile, Seitenleiste, Hauptinhalt usw. zu benennen. So können Sie herausfinden, worauf sich die einzelnen Stilelemente beziehen, was die Organisation zusätzlich erleichtert. Wenn Elemente jedoch ihren Zweck ändern, stellen Sie sicher, dass ihre Namen die Änderungen widerspiegeln. Ein Element mit dem Namen „Header“ am Ende der Seite kann sehr verwirrend sein und die Sortierung nach Standort zu einer entmutigenderen Aufgabe machen.

CSS-Kommentare

Dies führt zur Verwendung von CSS-Kommentaren in Ihren Stylesheets. Obwohl sie nicht immer verwendet werden, sind CSS-Kommentare sehr hilfreich, um verschiedene Teile des Stylesheets zu unterscheiden. Wenn Sie Ihre Stylesheets mit Stilen strukturiert haben, die sich auf die Kopfzeile nach oben und umgekehrt beziehen, können Sie mithilfe von CSS-Kommentaren den Anfang und das Ende unterschiedlicher Abschnitte wie der Kopf- und Fußzeile oder der Hauptinhaltselemente markieren. Die Verwendung von CSS-Kommentaren ist einfach. Beginnen Sie den Kommentar an einer beliebigen Stelle im Stylesheet mit /* und beenden Sie ihn dann unbedingt mit */ . Entscheidend ist, dass alles im Kommentar, sei es Code oder Text, nicht vom Browser analysiert wird, was CSS-Kommentare sehr nützlich macht, um Notizen und Beschreibungen zu verschiedenen Teilen des Stylesheets zu hinterlassen. Vielleicht könnten CSS-Kommentare noch zwei weitere Verwendungszwecke haben, um Kommentare für Ihre Kunden zu hinterlassen. Sollten diese in Zukunft weitere Änderungen an ihrer Website vornehmen wollen, steht ihnen ein Leitfaden zur Verfügung, der ihnen dabei hilft. Außerdem gibt es möglicherweise unterschiedliche Stile für dieselbe ID oder Klasse, die Sie für eine mögliche Verwendung oder zum Testen beibehalten möchten. Anstatt IDs und Klassen mit einer 2 am Ende zu kennzeichnen, z. B. header2, um zu verhindern, dass dieser Stil analysiert wird, wickeln Sie einfach header2 in /* und */ ein. Diese Technik sorgt nicht nur dafür, dass Ihr Stylesheet besser organisiert ist, da die Verwendung der „2-Technik“ leicht unübersichtlich werden kann, sondern hilft auch dabei, verschiedene Stilversionen innerhalb des Stylesheets auf unkomplizierte Weise zu erstellen und sich einfach erneut bereitzustellen (Kopieren und Einfügen statt). Zahlen ändern und alten Stil löschen). Obwohl CSS-Kommentare sehr nützlich sind, ist es jedoch auch wichtig, die Größe und Länge des Stylesheets zu berücksichtigen und entsprechend auszubalancieren. Kommentare sollten nicht mehr Platz beanspruchen als das eigentliche CSS; Sie sollten kurz und prägnant sein. Dies gilt es auch in Bezug auf verschiedene Versionen zu berücksichtigen. Benötigen Sie wirklich alle Versionen, die Sie in Ihrem Stylesheet gespeichert haben? Könnten Sie ein doppeltes Stylesheet woanders speichern? Das Vorhandensein mehrerer Stilversionen in Ihrem Stylesheet kann verwirrend sein. Daher ist es wichtig, Alternativen in Betracht zu ziehen, beispielsweise das Speichern doppelter Dateien.

Lesen:  Arten von Vlogs für soziale Netzwerke

Vermeide Dopplungen

Sobald das Stylesheet auf zugängliche Weise strukturiert ist, können unnötige Duplikate innerhalb des Stylings leicht erkannt werden. Aufgrund der Natur von CSS erben IDs und Klassen automatisch den Stil von ihrem übergeordneten Element, sodass keine doppelte Gestaltung erforderlich ist. Die vielleicht einfachste Technik besteht darin, am Anfang des Stylesheets eine Reihe wichtiger Stile zu definieren. Das Definieren universeller Stile für Links und Text ist hilfreich und macht die ständige Definition des Stils für jede ID und Klasse überflüssig. Dies ist insbesondere auch eine effektive Möglichkeit, einen konsistenten Stil auf einer Website beizubehalten und wirkt sich auch 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 geerbt werden, was zusätzlich zur Beseitigung unerwünschter Duplikate in Ihrem Stylesheet beiträgt.

Nutzen Sie, was Sie brauchen

Um Ihr CSS weiter zu optimieren, sollten Sie darüber nachdenken, welche CSS-Klassen Sie implementieren. Müssen Sie sie alle verwenden? Es ist leicht, sich dazu hinreißen zu lassen, Klassen zu definieren, die man nicht direkt braucht, von denen man aber denkt, dass man sie in Zukunft nutzen könnte. Um Ihr CSS-Stylesheet schlank, klein und organisiert zu halten, verwenden Sie nur CSS-Klassen, die für die Funktionsweise Ihrer Website von wesentlicher Bedeutung sind. Codieren Sie nur das, was benötigt wird. Um dies zu erreichen, vermeiden Sie wie angegeben die Duplizierung von Stilen und denken Sie daran, nicht verwendete Stile und solche, die nicht mehr relevant sind, zu löschen.

Abschluss

Durch die Befolgung dieser einfachen Techniken ist es möglich, besser organisierte und kleinere CSS-Dateien zu erstellen, die sowohl jetzt als auch in Zukunft für Sie und Ihre Kunden einfach zu navigieren und zu bearbeiten sind.

Lesen:  So bearbeiten Sie eine WordPress-Homepage

Haben Sie tolle Tipps, wie Sie Ihr CSS organisiert und optimiert halten? Lass es uns in den Kommentaren wissen!

Aktuelle Artikel:

Empfohlen