Entwicklung von effizientem, optimiertem CSS
CSS kann mit einem 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 wurde dieser Prozess organisierter; Es wurden Regeln eingeführt, um Best Practices für die Codierung zu erstellen.
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. Organisieren ist ein großer Schritt, aber die Verwendung von CSS kann etwas komplizierter sein.
Beachten Sie beim Lesen dieses Artikels Ihre eigenen Präferenzen; Der beste Rat, den Sie von jedem Entwickler bekommen können, ist, Ihre eigene Arbeitsweise zu finden. Kombinieren Sie einige der Techniken hier mit Ihren eigenen Methoden, um den größtmöglichen Nutzen zu erzielen.
Warum Bomber CSS straffen?
Viele Designer verwechseln Front-End- und Back-End-Sprachen, wenn es um das Parsen von Code geht. CSS und HTML sind Frontend-Designsprachen, die zum Formatieren und Formatieren von Elementen auf einer Website verwendet werden. Dateien werden vom Browser des Besuchers heruntergeladen und analysiert, was bedeutet, dass der Front-End-Code eine erhebliche Ladezeit hat.
Vom Browser heruntergeladener und geparster Code braucht Zeit, um gelesen und berechnet zu werden, genau wie in Back-End-Sprachen geschriebener Code (wie PHP oder Ruby). Optimiertes CSS kann einer Website sehr zugute kommen, da es Ladezeiten verkürzen und die Seitenelementstrukturierung beschleunigen kann.
Die Vorteile sind bei heutigen Hochgeschwindigkeitsverbindungen und modernen Betriebssystemen möglicherweise nicht offensichtlich. Möglicherweise möchten Sie Ihre Website in einem mobilen Browser anzeigen, um 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 während der Verarbeitung sehen. Dies kann von Browser zu Browser unterschiedlich aussehen, aber es passiert immer noch. Je mehr Sie den Code Ihrer Website testen, desto mehr werden Sie sehen.
Halten Sie Ihren Code standardisiert und einfach. Wenn Sie Ihren Blog oder Ihre persönliche Website ein paar Monate nach der ersten Entwicklung aktualisieren, ist es einfacher, mit den vertrauten CSS-Stilen zu arbeiten als mit neuen. Anpassung an etablierte Standards hilft auf lange Sicht.
Wie man mit effizientem Code arbeitet
Um mit der Programmierung von Stilen mit höchster Effizienz 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. Wenn Sie eine Reihe von Daten für Ihre Stile erstellen, halten Sie sie einfach. Erstellen Sie bei Bedarf Datensätze in einem Spaltenstapel.
Erstellen Sie zunächst eine Liste mit verschiedenen Abschnitten, an denen Sie in Ihren Stilen arbeiten können. Sie können Text, Formulare, Layoutfelder, Kopf- und Fußzeilen und alles, was Sie sonst noch benötigen, einbinden. Um sich wirklich zu organisieren, können Sie es in ein paar bekannte Stile aufteilen, wie z id oder class für Navigationslinks.
Dieser erste Schritt hilft, einen Plan für Ihre Website mit einfachen Worten zu erstellen, bevor Sie in jede Stilsprache kommen. Danach wird es einfacher, sich hinzusetzen, um Code zu schreiben; Wenn Sie die Ressourcenliste vor sich haben, können Sie Code fast übermenschlich ausschütten.
Behalten Sie blockweise Codes, die klar und sparsam sind
Es gibt eine anhaltende Debatte darüber, wie CSS-Code geschrieben werden sollte. Als ich anfing, benutzte ich Blocknotation, weil es alles war, was ich je gesehen hatte. Die Single-Line-Notation ist jedoch viel schneller, wenn es darum geht, Text zu analysieren und lesbar zu machen.
Ich halte nichts davon, Block-CSS zu ignorieren - weit gefehlt. Wenn Sie mit einem wichtigen Element zu tun haben oder id das hält sechs oder sieben Haupteigenschaften, es in der blockierten Form behaltend, wird einfacher sein. Sie werden die wichtigen Teile Ihres Stils isolieren, so dass sie auf einen Blick leichter zu finden sind.
Das Lesen langer Stile in Blockschreibweise ist auch einfacher, da die meisten Texteditoren lange Zeilen umbrechen und das Lesen von Eigenschaftswertpaaren kann verwirrend sein, wenn Sie 10 oder mehr durchgehen müssen. Als Webdesigner müssen Sie einen Aufruf zum Platzieren des CSS-Codes machen. Behalten Sie die Effizienz im Auge und verwenden Sie Ihr bestes Urteilsvermögen.
Mit anderen Entwicklern arbeiten
Wenn Sie ein professioneller Webdesigner sind oder es anstreben, einer zu werden, werden Sie wahrscheinlich früher oder später mit einem Team zusammenarbeiten. Dies kann je nach Team ein Segen oder ein Fluch sein.
Designer zögern oft, größere Änderungen an ihrer Arbeit vorzunehmen. CSS-Code ist ein bisschen anders, weil Sie versuchen, ein schönes Layout mit nur Eigenschaftswerten zu erstellen, und Dateien können unordentlich werden, wenn sie zwischen ein paar Händen übergeben werden. Also, bleiben Sie organisiert.
Kommentare sind eine große Hilfe. Wenn Zeilen oder Blöcke von Code andere verwirren oder in die Irre führen, sparen Kommentare Stunden. Erklären Sie alles, was Sie in das Stylesheet schreiben, so elegant wie möglich.
Stellen Sie sicher, dass keine doppelten oder angehängten Stile überschrieben werden. Stellen Sie sich vor, dass die h1 zu h4 Überschriften werden in einem CSS-Dokument hochgestylt, aber dann ändert ein niedrigerer Code die Schriftarten. Dies könnte für jemanden, der den Code nicht geschrieben hat, immens verwirrend sein und muss nun den Fehler beheben.
Kommunikation ist auch kritisch. Sie könnten den effizientesten Code schreiben, aber ein Mangel an Kommunikation wird Ihr Team verderben. Konzentrieren Sie sich auf die anstehende Aufgabe und arbeiten Sie mit den kreativen Ideen, die gemeinsam vom Team (nicht nur Ihrem eigenen) erstellt werden.
Verfolgen Sie separate CSS-Dokumente
Eine andere Möglichkeit, Code sauber und organisiert zu halten, besteht darin, Stilarten getrennt zu halten. Dies funktioniert gut für große Websites, bei denen das Halten aller Stile in einem einzigen Dokument unrealistisch wäre.
Facebook ist ein gutes Beispiel. Es hat wahrscheinlich viele verschiedene Stile für alle seine verschiedenen Seiten: Profil, Suche, Registrierung, Fotos, etc. Wenn die Stile alle in einer Datei konsolidiert wurden, würde ich nicht der Typ sein wollen, der den Code nur zu sortieren hat behebe einen einfachen Fehler.
Facebook bekommt 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 häufig Code, der auf dem Aspekt des Dokuments basiert, das er strukturiert (z. B. layout.css , text.css , forms.css ).
Nicht alle Stile müssen auf jeder Seite geladen werden. Und hier liegt der Vorteil: Die Methode ermöglicht eine größere Anpassung beim Aufbau Ihrer Website. Sie reduzieren die Zeit für die Analyse erheblich, indem Sie separate Ansichten und Stile erstellen.
Testunterstützung für IE
Webentwickler haben Internet Explorer immer als Schurken dargestellt, besonders mit CSS. Glücklicherweise können Sie bedingte Kommentare (die bei den meisten Browsern wie normale Kommentare aussehen) auf den HTML-Code anwenden.
Mit diesen können Sie Stile in Internet Explorer anwenden. Überprüfen Sie bedingte Kommentare, wenn Sie mit ihnen nicht vertraut sind. Sie können sich als unschätzbar erweisen, wenn CSS-Eigenschaften nicht richtig funktionieren und Sie eine Alternative benötigen.
Mit der Veröffentlichung von Internet Explorer 9 Beta Wir nähern uns einem einheitlichen Internet-Erlebnis. Das einzige Problem ist die Anzahl der Leute, die immer noch so alte Browser wie IE6 und IE7 laufen haben, die schwerwiegende Verarbeitungsfehler (aufgrund fehlerhafter Rendering-Engines) haben und manchmal externe Styles benötigen. Glücklicherweise hat sich der Support verbessert und Microsoft scheint die Dinge umzudrehen.
Hinzufügen eines Inhaltsverzeichnisses
Dieser Schritt ist optional, aber ich finde es Wunder für meine Stylesheets. Sie können die Tabelle außerhalb des CSS-Dokuments selbst speichern, aber ich habe festgestellt, dass dies etwas kontraproduktiv ist - vor allem, weil das Hinzufügen von Kommentaren so einfach ist.
Die Hauptgründe für das Einfügen eines Inhaltsverzeichnisses in Ihre Stile sind, dass der Zugriff erleichtert und der Bearbeitungsprozess optimiert wird. Setzen Sie am Anfang des Dokuments Markierungen, um den Code in logische Unterteilungen aufzuteilen.
Erstellen Sie Ihre eigenen Schlüssel ist ein guter Ansatz. Wenn Sie beispielsweise Ihre Tabelle nach den Hauptbereichen des Dokuments (Layout, Schriftart, Kopfzeile, Navigation usw.) aufteilen möchten, können Sie die Abschnitte mit eindeutigen Zeichen versehen.
Du könntest benutzen =!layout und =!font um die Layout- bzw. Schriftschnitte abzugrenzen. Sie werden wahrscheinlich nirgends im Code auf diese genauen Zeichenfolgen stoßen. Daher sollten Sie sie sowohl der Tabelle als auch dem Anfang jedes Kommentars hinzufügen. Verwenden Sie dann die Suchfunktion in Ihrem Texteditor, um zu dem gewünschten Abschnitt zu springen.
Dies ist auch eine gute Strategie für Projekte, in denen viele Menschen den Code betrachten werden. Es hält alles organisiert und zugänglich.
Es gibt viele Möglichkeiten, den Code zu optimieren und effizienter zu gestalten. Diese Tipps sind ein guter Anfang. CSS entwickelt sich weiter und viele neue Ideen werden aufgebaut.
Sie brauchen Leidenschaft und Engagement, um es in der Designbranche zu schaffen. Wenn Sie an Ihrer Leidenschaft für digitales Design festhalten können, sollte es nicht schwierig sein, mit den besten CSS-Praktiken Schritt zu halten. In dieser riesigen globalen Gemeinschaft von Webdesignern kann es sehr hilfreich sein, andere zu erreichen. Branchenexperten teilen ihre Techniken und Innovationen gerne mit anderen.
Dieser Beitrag wurde exklusiv für Webdesigner Depot geschrieben von Jake Rocheleau , ein leidenschaftlicher Webdesigner und Social Media Enthusiast. Jake liest und schreibt gerne über die neuesten Trends in den Bereichen Digital und Internet und vernetzt sich mit der Design-Community. 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 Anfänger CSS Entwickler? Welche neuen Funktionen oder zusätzliche Unterstützung möchten Sie in zukünftigen Iterationen von CSS sehen?