Eine Anleitung zum Schreiben von besserem CSS

Besseres CSS zu schreiben muss keine mühsame Tortur sein. Ein paar kleinere Anpassungen an Ihrer Arbeitsweise in Ihrer CSS-Codedatei können große Auswirkungen haben. In diesem Artikel werden acht einfache Möglichkeiten vorgestellt, wie Sie Ihre CSS-Kenntnisse verbessern und saubereren, effizienteren und besseren CSS-Code schreiben können.

01. Beginnen Sie mit einem CSS-Reset

CSS Reset bietet Ihnen eine saubere Basis für die Arbeit

CSS Reset bietet Ihnen eine saubere Basis für die Arbeit

Einige könnten argumentieren, dass mit a CSS zurücksetzen ist unnötig. Mit einem CSS-Reset können Sie jedoch mit einer sauberen Basis beginnen, wodurch die Gestaltung Ihrer Website vereinfacht wird und allgemein vorhersehbarere Ergebnisse erzielt werden.



Ein CSS-Reset setzt die Standardstile des Browsers zurück oder überschreibt sie. Sie können Ihre eigenen schreiben, einen der vielen online verfügbaren Resets verwenden oder eine Kombination aus beiden verwenden.

02. Wissen, wann CSS-Kurzschrift verwendet werden muss

Die Kurzform sollte die Dateigröße reduzieren und die Ladezeiten verkürzen

Die Kurzform sollte die Dateigröße reduzieren und die Ladezeiten verkürzen

Mit der CSS-Kurzform können Sie mehrere Eigenschaften eines Elements in einer einzigen Zeile festlegen. Die Verwendung von Kurzschrift spart Platz und benötigt weniger Zeit zum Laden. Sie sollten es jedoch nicht für alles verwenden.

Manchmal bietet Langschrift die dringend benötigte Klarheit. Aber was noch wichtiger ist: Wenn Sie nur eine oder zwei Eigenschaften festlegen müssen - oder einfach etwas überschreiben müssen -, ist Longhand möglicherweise sogar besser.

Noch etwas zu beachten: Wenn Sie eine Kurzform verwenden, werden die ignorierten Eigenschaften zurückgesetzt, was unerwünschte Auswirkungen haben kann.

03. Halten Sie es trocken

Don

Wiederhole dich nicht

Möglicherweise ist der beste Rat zum Schreiben eines besseren CSS-Codes die DRY-Methodik. DRY bedeutet 'Wiederholen Sie sich nicht' - verwenden Sie im Wesentlichen nicht immer und immer wieder dieselben Codebits.

Eine Möglichkeit, die Dinge in CSS trocken zu halten, besteht darin, die Dinge zu gruppieren. Schauen wir uns ein Beispiel an.

Original CSS

.menu li { color: red; } .menu li a { color: red; }

Refactored und trocken

.main li, .main li a { color: red; }

Wie Sie sehen, wird dadurch nicht nur die Gesamtgröße Ihrer CSS-Datei verringert, was zu schnelleren Ladezeiten führt, sondern Sie profitieren auch im Bereich der Wartung. Wenn die Farbe Die Immobilie muss aktualisiert werden. Sie aktualisieren sie nur an einer Stelle.

Sie können auch benutzerdefinierte CSS-Eigenschaften verwenden, um trocken zu bleiben. Benutzerdefinierte Eigenschaften werden wie folgt erstellt:

:root { --primary-color: red; }

Und kann dann überall in Ihrem CSS-Code verwendet werden, so oft Sie möchten:

.main li, .main li a { color: var(--primary-color); }

04. Hör auf zu viel zu verwenden! Wichtig

Es gibt sehr wenige Fälle, in denen Sie verwenden müssen !wichtig . Es ist eine der am meisten - wenn nicht die am meisten - missverstandenen und überstrapazierten Erklärungen.

Versteh mich nicht falsch, !wichtig hat seinen Platz, aber im Allgemeinen verwenden Webentwickler ihn verzweifelt, wenn die Dinge nicht richtig aussehen. Um die Probleme zu beheben, geben sie ihrer Regel ein wenig mehr Gewicht, indem sie das hinzufügen !wichtig Erklärung dazu.

Das Problem ist, dass dadurch ein Dominoeffekt entsteht, der sich schnell in einen Wartungsalptraum verwandelt, da immer mehr Dinge deklariert werden !wichtig . Benutz nur !wichtig wenn es absolut notwendig ist.

05. Bleiben Sie konsequent

Unabhängig davon, wie Sie Ihr CSS schreiben und in welcher Reihenfolge Sie die Eigenschaften hinzufügen, halten Sie es konsistent. Einige Leute ordnen ihre Eigenschaften alphabetisch, während andere eher logisch vorgehen - zum Beispiel Dinge nach Zeilenlänge oder Typ zu organisieren. Ich entscheide mich für Ersteres, aber es liegt ganz bei Ihnen. Das Endergebnis ist, was auch immer Sie wählen, bleiben Sie dabei, damit es später leicht ist, Dinge zu finden.

06. Benennen Sie die Dinge intelligent

Verwenden Sie eine Standard-Namenskonvention für Ihre Selektoren

Verwenden Sie eine Standard-Namenskonvention für Ihre Selektoren

Dies scheint ein Kinderspiel zu sein, aber wenn Sie Ihre Selektoren benennen, werden Sie nicht zu kompliziert. Seien Sie prägnant und halten Sie sich an eine Standard-Namenskonvention.

Einige Dinge, die Sie bei der Erstellung Ihrer Selektornamen beachten sollten:

  • Vermeiden Sie Präsentationswörter: Dies sind diejenigen, die Farbe und Anzeigeort betreffen (z. B. grüner Text oder Top-Menüleiste )
  • Verwenden Sie nur Kleinbuchstaben: Bei CSS wird zwischen Groß- und Kleinschreibung unterschieden. Erstellen Sie daher keine Namen wie: Menüleiste . Es ist jedoch zu beachten, dass Kamel Fall ( Menüleiste ) ist eine akzeptable Praxis, die in einigen Fällen nur nicht bevorzugt wird
  • Trennen Sie mehrere Wörter mit einem Bindestrich: Zum Beispiel, Hauptmenü . Sie können auch Kamelkoffer verwenden ( Hauptmenü ), aber auch dies wird oft nicht bevorzugt
  • Sei nicht zu spezifisch: Sie werden am Ende mehrere Selektoren für denselben Elementtyp verwenden. Zum Beispiel, Liste eins und Liste zwei kann kombiniert werden, so dass eine einzige entsteht Listenelemente

07. Fügen Sie gegebenenfalls Kommentare hinzu

Es stimmt zwar, dass guter Code keine Kommentare benötigt, aber es ist auch richtig, dass in einigen Fällen Kommentare zum Code hinzugefügt werden müssen. Als Faustregel gilt: Wenn der Quellcode von dem Kommentar profitiert, fügen Sie ihn hinzu. sonst nicht.

Wenn Sie sich fragen, wann Kommentare erforderlich sein könnten, finden Sie hier einige Beispiele:

  • Kommentierter Code: Wenn Sie einen bestimmten Teil des Codes aus einem bestimmten Grund auskommentieren, hinterlassen Sie einen Kommentar, in dem dieser Grund erläutert wird. Wenn Sie dies nicht tun, können Sie sich möglicherweise nicht erinnern, warum Sie es überhaupt auskommentiert haben
  • Hotfixes: Wenn Sie einen 'Hotfix' hinzufügen, ist es möglicherweise eine gute Idee, einen Kommentar hinzuzufügen, der dies ebenfalls erklärt
  • Erinnerungen: Sie arbeiten wahrscheinlich zu einem bestimmten Zeitpunkt an mehr als einem Projekt. Wenn Ihre Aufmerksamkeit auf sich gezogen wird, bevor Sie die Möglichkeit haben, etwas zu erledigen, können Sie Kommentare als Erinnerung an das verwenden, was Sie noch zu tun haben
  • Erklärungen: Wenn ein Codeabschnitt unklar ist und Sie der Meinung sind, dass eine Erklärung zur Klärung beitragen würde, fügen Sie einen Kommentar hinzu - so einfach ist das

08. Entdecken Sie Flexbox

Flexbox ist der neueste Game-Changer im Webdesign

Flexbox ist der neueste Game-Changer im Webdesign

Wenn Sie Elemente auf der Seite ausrichten möchten, haben Sie mit dem Flexible Box Layout-Modul (oder der Flexbox) die vollständige Kontrolle. Mit Flex-Containern und Flex-Artikeln können Sie genau definieren, wie die Dinge aussehen. Mit Flexbox können Sie Elemente auch vertikal auf einer Seite anordnen, was mit Floats nicht möglich war.

Es ist ein wenig schwierig, den Kopf herumzukriegen, aber es lohnt sich. Beginnen Sie mit dem Lesen unserer Webdesigner-Handbuch zu Flexbox .

Weiterlesen: