CSS kann mit dem Werkzeugsatz eines Bildhauers verglichen werden; Wie Bildhauer bei der Arbeit verwenden wir Designer CSS, um strukturierte Layouts von Websites zu erstellen.
Im Laufe der Jahre ist dieser Prozess organisierter geworden; Es wurden Regeln eingeführt, um Best Practices für die Codierung zu schaffen.
In diesem Artikel werfen wir einen Blick auf einige Ideen, die Sie beim Schreiben von Stylesheets verwenden können, um Ihren Code zu beschleunigen.
Effizientes CSS ist einfach zu verwalten und leicht zu lesen und kann eine Ressource für Webdesigner sein. Die Organisation ist ein großer Schritt, aber die Verwendung von CSS kann etwas komplizierter sein.
Behalten Sie beim Lesen dieses Artikels Ihre eigenen Vorlieben im Hinterkopf; Der beste Rat, den Sie von einem Entwickler bekommen können, ist, Ihre eigene Arbeitsweise zu finden. Kombinieren Sie einige der hier aufgeführten Techniken mit Ihren eigenen Methoden, um den größtmöglichen Nutzen zu erzielen.
Warum sollte man sich die Mühe machen, CSS zu optimieren?
Viele Designer verwechseln Front-End- und Back-End-Sprachen, wenn sie über das Parsen von Code sprechen. CSS und HTML sind Frontend-Designsprachen, die zum Formatieren und Gestalten von Elementen auf einer Website verwendet werden. Dateien werden vom Browser des Besuchers heruntergeladen und analysiert, was bedeutet, dass der Front-End-Code eine beträchtliche Ladezeit hat.
Vom Browser heruntergeladener und analysierter Code braucht Zeit, um gelesen und berechnet zu werden, genau wie Code, der in Back-End-Sprachen (wie PHP oder Ruby) geschrieben wurde. Optimiertes CSS kann einer Website große Vorteile bringen, da es die Ladezeiten verkürzen und die Strukturierung von Seitenelementen beschleunigen kann.
Bei den heutigen Hochgeschwindigkeitsverbindungen und fortschrittlichen Betriebssystemen sind die Vorteile möglicherweise nicht offensichtlich. Möglicherweise möchten Sie Ihre Website in einem mobilen Browser betrachten, um die Ladezeiten zu vergleichen und zu sehen, wie die Website geladen wird.
Wenn CSS effizient codiert ist, sollten Sie die Form und den Stil der Website-Elemente sehen, während sie verarbeitet werden. Das kann von Browser zu Browser unterschiedlich aussehen, kommt aber dennoch vor. Je mehr Sie den Code Ihrer Website testen, desto häufiger werden Sie ihn sehen.
Halten Sie Ihren Code standardisiert und einfach. Wenn Sie Ihren Blog oder Ihre persönliche Website einige Monate nach der ersten Entwicklung aktualisieren, ist es einfacher, sich mit vertrauten CSS-Stilen zu beschäftigen, als sich mit neuen zu befassen. Die Anpassung an etablierte Standards hilft auf lange Sicht.
So arbeiten Sie mit effizientem Code
Um mit größtmöglicher Effizienz mit der Codierung von Stilen zu beginnen, müssen Sie einige neue Ideen übernehmen. Dies sind grundlegende CSS-Techniken, die heute von erstklassigen Internet-Websites und App-Entwicklern verwendet werden.
Halten Sie Ihren Code einfach
Dies kann leicht übersehen werden. Halten Sie es einfach, wenn Sie eine Reihe von Daten für Ihre Stile zuordnen. Erstellen Sie bei Bedarf Datensätze in einem Spaltenstapel.
Erstellen Sie zunächst eine Liste verschiedener Abschnitte, an denen Sie in Ihren Stilen arbeiten können. Sie können Text, Formulare, Layoutfelder, Kopf- und Fußzeilen und alles andere einfügen, was Sie benötigen. Um wirklich Ordnung zu schaffen, können Sie es in einige bekannte Stile unterteilen, z. B. eine ID oder eine Klasse für Navigationslinks.
Dieser erste Schritt hilft dabei, mit einfachen Worten einen Entwurf für Ihre Website zu erstellen, bevor Sie sich mit einer Stilsprache befassen. Danach wird es viel einfacher sein, sich hinzusetzen und Code zu schreiben. Wenn Sie die Ressourcenliste vor sich haben, können Sie Code in einem fast übermenschlichen Tempo ausschütten.
Halten Sie Codeblöcke abgegrenzt und spärlich
Es gibt eine anhaltende Debatte darüber, wie CSS-Code geschrieben werden sollte. Als ich anfing, benutzte ich die Blocknotation, weil das alles war, was ich je gesehen hatte. Die einzeilige Notation ist jedoch viel schneller, wenn es darum geht, Text zu analysieren und lesbar zu machen.
Ich plädiere nicht dafür, CSS im Blockstil zu ignorieren – ganz im Gegenteil. Wenn Sie es mit einem wichtigen Element oder einer ID zu tun haben, die sechs oder sieben Haupteigenschaften enthält, ist es einfacher, sie in blockierter Form zu halten. Sie isolieren die wichtigen Teile Ihres Stils, sodass sie auf einen Blick leichter zu finden sind.
Das Lesen langer Stile in Blocknotation ist auch einfacher, da die meisten Texteditoren lange Zeilen umbrechen und das Lesen von Eigenschafts-Wert-Paaren verwirrend sein kann, wenn Sie 10 oder mehr durchzugehen haben. Als Webdesigner müssen Sie entscheiden, wie Sie den CSS-Code verteilen. Denken Sie an die Effizienz und verwenden Sie Ihr bestes Urteilsvermögen.
Zusammenarbeit mit anderen Entwicklern
Wenn Sie ein professioneller Webdesigner sind oder einer werden möchten, werden Sie früher oder später wahrscheinlich mit einem Team zusammenarbeiten. Das kann je nach Team ein Segen oder ein Fluch sein.
Designer zögern oft, größere Änderungen an ihrer Arbeit vorzunehmen. CSS-Code ist etwas anders, da Sie versuchen, ein schönes Layout nur mit Eigenschaftswerten zu erstellen, und Dateien können unordentlich werden, wenn sie zwischen mehreren Händen weitergegeben werden. Bleiben Sie also organisiert.
Kommentare sind eine große Hilfe. Wenn Codezeilen oder -blöcke andere verwirren oder irreführen könnten, sparen Kommentare Stunden. Erklären Sie alles, was Sie in das Stylesheet einfügen, so elegant wie möglich.
Stellen Sie sicher, dass keine doppelten oder angehängten Stile überschrieben werden. Stellen Sie sich vor, dass die Überschriften h1 bis h4 oben in einem CSS-Dokument formatiert sind, aber dann ändert ein Code weiter unten ihre Schriftarten. Dies könnte für jemanden, der den Code nicht geschrieben hat und nun den Fehler beheben muss, äußerst verwirrend sein.
Auch die Kommunikation ist entscheidend. Sie könnten den effizientesten Code schreiben, aber ein Mangel an Kommunikation wird Ihr Team zum Scheitern bringen. Konzentrieren Sie sich auf die anstehende Aufgabe und arbeiten Sie mit den kreativen Ideen, die das Team gemeinsam entwickelt hat (nicht nur mit Ihren eigenen).
Behalten Sie den Überblick über separate CSS-Dokumente
Eine weitere Möglichkeit, den Code sauber und organisiert zu halten, besteht darin, die Stiltypen getrennt zu halten. Dies funktioniert gut für große Websites, bei denen es unrealistisch wäre, alle Stile in einem einzigen Dokument zu speichern.
Facebook ist ein gutes Beispiel. Es gibt wahrscheinlich viele verschiedene Stile für alle seine verschiedenen Seiten: Profil, Suche, Registrierung, Fotos usw. Wenn die Stile alle in einer Datei zusammengefasst wären, würde ich nicht der Typ sein wollen, der nur dafür den Code sortieren muss einen einfachen Fehler beheben.
Facebook erhält viel mehr Traffic als Ihre Website, aber die Prinzipien sind die gleichen. Wenn die Organisation ein Problem darstellt, können separate Stylesheets viel bewirken. Webdesigner organisieren Code oft basierend auf dem Aspekt des Dokuments, das er strukturiert (z. B layout.css, text.css, Formen.css).
Es müssen nicht alle Stile auf jeder Seite geladen werden. Und hier liegt der Vorteil: Die Methode ermöglicht eine stärkere Anpassung beim Erstellen Ihrer Website. Sie können die Analysezeit enorm verkürzen, indem Sie einfach separate Ansichten und Stile erstellen.
Testen der Unterstützung für IE
Webentwickler haben den Internet Explorer schon immer als Bösewicht dargestellt, insbesondere bei CSS. Glücklicherweise können Sie bedingte Kommentare (die in den meisten Browsern wie normale Kommentare aussehen) auf den HTML-Code anwenden.
Sie können diese verwenden, um Stile im Internet Explorer anzuwenden. Schauen Sie sich bedingte Kommentare an, wenn Sie mit ihnen nicht vertraut sind. Sie können von unschätzbarem Wert sein, wenn CSS-Eigenschaften nicht richtig funktionieren und Sie eine Alternative benötigen.
Mit der Veröffentlichung von Internet Explorer 9 Beta, kommen wir einem einheitlichen Internet-Erlebnis ein Stück näher. Das einzige Problem ist die Anzahl der Leute, die immer noch Browser verwenden, die so alt sind wie IE6 und IE7, die schwerwiegende Verarbeitungsfehler aufweisen (aufgrund fehlerhafter Rendering-Engines) und manchmal externe Stile erfordern. Zum Glück hat sich der Support verbessert und Microsoft scheint die Wende herbeizuführen.
Hinzufügen eines Inhaltsverzeichnisses
Dieser Schritt ist optional, aber ich finde, dass er bei meinen Stylesheets Wunder bewirkt. Sie können die Tabelle außerhalb des CSS-Dokuments selbst speichern, aber ich habe festgestellt, dass dies etwas kontraproduktiv ist – insbesondere, weil das Hinzufügen von Kommentaren inline so einfach ist.
Die Hauptgründe für das Einfügen eines Inhaltsverzeichnisses in Ihre Stile bestehen darin, dass es den Zugriff erleichtert und den Bearbeitungsprozess rationalisiert. Platzieren Sie Markierungen am Anfang Ihres Dokuments, um den Code in logische Abschnitte zu unterteilen.
Das Erstellen eigener Schlüssel ist ein guter Ansatz. Wenn Sie beispielsweise planen, Ihre Tabelle nach den Hauptbereichen des Dokuments (Layout, Schriftart, Kopfzeile, Navigation usw.) aufzuteilen, können Sie die Abschnitte mit eindeutigen Zeichen versehen.
Sie können =!layout und =!font verwenden, um die Layout- bzw. Schriftartabschnitte abzugrenzen. Sie werden wahrscheinlich nirgendwo im Code auf genau diese Zeichenfolgen stoßen, daher sollte es sicher sein, sie sowohl in Ihre Tabelle als auch am Anfang jedes Kommentarabschnitts einzufügen. Verwenden Sie dann die Suchfunktion in Ihrem Texteditor, um zum gewünschten Abschnitt zu springen.
Dies ist auch eine gute Strategie für Projekte, bei denen sich viele Leute mit dem Code befassen. Es sorgt dafür, dass alles organisiert und zugänglich bleibt.
Es gibt viele Möglichkeiten, Code zu optimieren und effizienter zu machen, und diese Tipps sind ein guter Anfang. CSS entwickelt sich weiter und es werden viele neue Ideen dazu entwickelt.
Um in der Designbranche erfolgreich zu sein, braucht man Leidenschaft und Hingabe. Wenn Sie Ihre Leidenschaft für digitales Design beibehalten können, sollte es nicht schwierig sein, mit den CSS-Best Practices Schritt zu halten. Es kann eine große Hilfe sein, mit anderen in dieser riesigen globalen Community von Webdesignern Kontakt aufzunehmen. Branchenexperten teilen in der Regel gerne ihre Techniken und Innovationen.
Dieser Beitrag wurde exklusiv für Webdesigner Depot geschrieben von Jake Rocheleau, ein leidenschaftlicher Webdesigner und Social-Media-Enthusiast. Jake liebt es, über die neuesten Digital- und Internettrends zu lesen und zu schreiben und sich mit der Design-Community zu vernetzen. Um mehr über seine Arbeit zu erfahren, finden Sie ihn auf Twitter @jakerocheleau.
Was sind Ihre Methoden zur Optimierung von CSS? Irgendwelche Vorschläge für neue CSS-Entwickler? Welche neuen Funktionen oder zusätzlichen Support würden Sie sich in zukünftigen CSS-Iterationen wünschen?
