So schreiben Sie sauberes CSS ohne Duplikate oder Unordnung

Nach wochenlanger Arbeit an einem Webprojekt sind CSS-Dateien voller sich wiederholender Definitionen, langer, schwer verständlicher Klassennamen und Zeilen, deren Zweck schwer nachvollziehbar ist. Dieses Chaos tritt nicht plötzlich auf, sondern häuft sich mit jeder kleinen Anpassung oder vorübergehenden Ergänzung an, die dauerhaft wird.

Aber das Schreiben von CSS muss weder planlos noch umständlich sein. Es gibt einfache Techniken und bewährte Methoden, die dabei helfen, Code zu organisieren, Duplikate zu reduzieren und die Erweiterbarkeit zu verbessern. Durch Befolgen einiger Regeln und Vorgehensweisen kann eine CSS-Datei in etwas Klares, leicht Verständliches und schnell Ladefähiges umgewandelt werden.

In diesem Handbuch zeigen wir Ihnen praktische Schritte, die Ihnen dabei helfen, sauberes CSS zu schreiben, von der ersten Zeile bis zur letzten Änderung.

Seit seinen Anfängen in den späten 1990er Jahren hat sich der Anwendungsbereich von CSS erheblich erweitert. Mittlerweile handelt es sich um eine leistungsstarke und fortschrittliche Technologie, die von Desktop- und Mobilbrowsern weitgehend unterstützt wird, aber es gibt noch viel zu lernen. Egal, ob Sie CSS noch nicht kennen oder zum ersten Mal lernen möchten, diese Checkliste hilft Ihnen mit praktischen Tipps, allgemeinen Richtlinien und hochwertigen Ressourcen.

1. Stellen Sie zunächst sicher, dass Sie HTML kennen.

Das Erste, was Sie wissen sollten, bevor Sie mit dem Erlernen von CSS beginnen, ist HTML. Dies mag offensichtlich erscheinen, aber es gibt einige wichtige Konzepte, die Sie noch einmal durchdenken sollten, bevor Sie mit der Formatierung Ihrer Inhalte beginnen.

Ihr Lernprozess konzentriert sich auf die Trennung von Semantik (HTML) und Stil (CSS). Stellen Sie sicher, dass Sie eine gute, klare Auszeichnung verwenden und entfernen Sie alle stilistischen HTML-Tags, die Sie möglicherweise gewohnt sind.

Die HTML-Dokumentation von Mozilla ist ausgezeichnet. (Sowie sein gesamtes Material zur Webplattform), also beginnen Sie dort, wenn Sie sich Ihrer HTML-Kenntnisse nicht sicher sind.

2. Beginnen Sie mit den absoluten Grundlagen von CSS

Bleiben Sie auf der Mozilla-Website undTauchen Sie ein in die Einführung in CSS.

An diesem Punkt müssen zwei grundlegende Dinge gelernt werden: wie man einfaches CSS schreibt und es mit HTML-Dateien verknüpft. Die Dokumentation von Mozilla beginnt mit einer einfachen Einführung in CSS anhand dieses Beispiels:

 

Auch wenn Sie nicht gut darin sind, CSS zu schreiben, können Sie wahrscheinlich verstehen, was dieser Codeausschnitt bewirkt: Er färbt h1-Elemente rot und legt eine bestimmte Schriftgröße fest.

Der Mozilla-Artikel „Erste Schritte mit CSS“ beschreibt den zweiten Teil des Puzzles und erklärt, wie CSS, wie oben, auf HTML-Dateien angewendet wird. Interne Stylesheets sind wahrscheinlich der schnellste und einfachste Weg, um anzufangen, aber externe Stylesheets haben viele Vorteile, daher ist es eine gute Idee, beide auszuprobieren.

3. Spielen Sie ein paar Spiele

Obwohl es viele tolle Spiele gibt, die Ihnen helfen CSS lernenSie decken jedoch normalerweise fortgeschrittenere Techniken ab, beispielsweise die Netzwerkplanung. CSS Diner ist eher für Anfänger geeignet und soll Ihnen helfen, die CSS-Selektoren zu verstehen, die bestimmte Teile Ihres Dokuments zur Formatierung markieren. Das obige Beispiel zeigt einen einfachen „h1“-Selektor, er kann jedoch komplexer sein.

a#selected > .icon,
.box h2 + p {
    font-weight: bold;
}

Der Test gilt als CSS-Speedrun Ein weiterer guter Test Ihrer Fähigkeiten im Umgang mit Selektoren, obwohl es – wie der Name schon sagt – eine anstrengendere Erfahrung sein kann!

4. Verwenden Sie die Entwicklertools von Chrome/Safari/Firefox

Sobald Sie die Grundlagen beherrschen, sind Sie fast bereit, mit dem Schreiben Ihrer eigenen Stylesheets zu beginnen. Sie können jedoch direkt in Ihrem Browser mit CSS experimentieren, sodass Sie keinen Texteditor öffnen und mit der Änderung von Dateien beginnen müssen.

Mit dem Elementinspektor in den Google Developer Tools können Sie beispielsweise das CSS anzeigen, das für alle Elemente auf allen angezeigten Seiten gilt:

Darüber hinaus können Sie über das Bedienfeld „Stile“ jede CSS-Datei ändern oder sogar neue Stile erstellen und die Ergebnisse sofort sehen.

Diese Tools unterscheiden sich in jedem Browser leicht, Sie sollten sie jedoch nutzen können, um Ihre Fähigkeiten zu verbessern. Chrome bietet eine hervorragende Autovervollständigungsunterstützung zum Vorschlagen akzeptabler Eigenschaftsnamen und -werte. Durch Experimentieren können Sie verschiedene Funktionen kennenlernen und über direkte Links zur Dokumentation des Mozilla Developer Network (MDN) mehr darüber erfahren:

5. Probieren Sie einen Online-Editor aus

Bevor Sie diesen Texteditor verwenden, können Sie Ihre CSS-Kenntnisse auf eine andere Weise ausprobieren, ohne sich mit lokalen Dateien befassen zu müssen. Es gibt viele Webanwendungen, wie zum Beispiel: CodePen أو JSFiddle. Diese Tools ähneln einigen Spielen, die Sie zuvor gesehen haben, mit Ausnahme des Spielteils. Es bietet Textfelder, die Sie zum Bearbeiten von HTML und CSS verwenden können, mit einer Vorschau, die das Endergebnis anzeigt.

Rat
Obwohl diese Tools normalerweise einen JavaScript-Abschnitt zum Erweitern Ihrer Programmierkenntnisse enthalten, ist dieser völlig optional. Ignorieren Sie einfach alle „JS“- oder „JavaScript“-Abschnitte und konzentrieren Sie sich auf HTML und CSS.

Diese Editoren enthalten nützliche Funktionen wie Syntaxhervorhebung und Codeformatierung. JSFiddle verfügt über eine gute Fehlerberichterstattung und macht Sie beispielsweise auf ungültige CSS-Werte aufmerksam. Sie können Ihre Arbeit auch zur späteren Verwendung speichern und HTML oder CSS jederzeit in eine lokale Datei kopieren und einfügen, wenn Sie es in Ihren eigenen Projekten verwenden möchten.

6. Verwenden Sie die besten Referenzmaterialien.

Wie Sie gesehen haben, verweisen viele dieser Ressourcen auf das Software Developer Network (MDN). Diese Informationsquelle auf der Webplattform ist ausgezeichnet und umfassend; Dies sollte Ihre erste Anlaufstelle sein, wenn Sie Details zu einem CSS-Problem nachschlagen müssen.

Warnung
Möglicherweise stoßen Sie auf eine Site W3Schools Bei der Suche nach CSS-Themen oder anderen webbezogenen Themen. Der Name der Site lässt darauf schließen, dass sie mit dem W3C verbunden ist, der Organisation, die Standards für Webtechnologien festlegt. Aber es ist nicht so; Es handelt sich um eine Sammlung von Dokumenten eines Dritten. Obwohl sich die Qualität verbessert hat, ist es noch lange nicht perfekt und das MDN ist eine viel zuverlässigere Quelle.

MDN verfügt über eine Fülle von CSS-Materialien, von Tutorials bis hin zu interaktiven Quizzen. Die Site deckt alle Aspekte von CSS ab, einschließlich Selektoren, Boxmodell, Farben und Debugging. Zu jeder CSS-Eigenschaft gibt es eine entsprechende Referenzseite, auf der Sie fast alles erfahren, was Sie darüber wissen müssen.

Jede Eigenschaftsreferenzseite enthält eine Erklärung der verschiedenen Werte, Beispiele für deren Verwendung und eine Browserkompatibilitätstabelle. Letzteres ist notwendig, um zwischen gut unterstützten Funktionen und experimentellen Funktionen zu unterscheiden, die möglicherweise nur in bestimmten Browsern funktionieren.

Wenn Sie nach einer guten Alternative suchen, sind die CSS-Ressourcen des W3C zuverlässig. Seien Sie jedoch gewarnt: Die Verwendung ist für Anfänger nicht einfach und Sie sollten erst dann darauf zurückgreifen, wenn Sie die hervorragenden Informationen im MDN ausgeschöpft haben.

7. Bleiben Sie informiert

Obwohl es sich um eine ausgereifte und stabile Technologie handelt, verändert sich CSS weiterhin. Mitglieder verschiedener Organisationen schlagen weiterhin Änderungen, Korrekturen und neue Funktionen vor.

Für Sie als Designer geht die Herausforderung oft über das bloße Wissen hinaus, wie etwas gemacht wird. Der Schwerpunkt liegt vielmehr darauf, was Sie tatsächlich erreichen können. Sie können die Farbe des Textes ändern, aber können Sie auch seinen Umriss ändern? Oder kann man statt einer Farbe auch einen Farbverlauf verwenden?

Um über die neuesten Entwicklungen auf dem Laufenden zu bleiben und diese Fragen zu beantworten, sollten Sie nach einer guten Quelle für CSS-Neuigkeiten suchen, sei es ein Podcast, ein Blog oder ein dedizierter Social-Media-Account.

Bereiten CSS-Tricks. Eine der besten Quellen für fortgeschrittene CSS-Neuigkeiten. Es enthält Artikel zu allen Aspekten von CSS sowie hervorragendes Referenzmaterial, insbesondere zu Funktionen wie Flexbox und Grid.

Der CSS-Podcast ist ein saisonales Programm, das seit fünf Jahren ausgestrahlt wird. Die Moderatoren sind sehr interaktiv und ermöglichen es, in die Details von CSS einzutauchen, ohne dass das Thema langweilig oder kompliziert wird.

Veröffentlichen Dr. Leah FerroAls Expertin auf diesem Gebiet veröffentlicht sie regelmäßig auf X Beiträge zu CSS und der Webplattform. Es funktioniert Gene Simmons Apple hat es in Safari und veröffentlicht auf Bluesky Beiträge zu CSS-Problemen. Konto CSS-Arbeitsgruppe Sehr formell. Das Konto veröffentlicht nur gelegentlich Beiträge, um Spezifikationsaktualisierungen und andere verwandte Artikel von w3.org bekannt zu machen. Ihm zu folgen ist jedoch eine großartige Möglichkeit, über die neuesten Entwicklungen auf dem Laufenden zu bleiben.

8. CSS validieren

Nachdem Sie nun Dutzende von Stylesheets erstellt haben, sollten Sie sicherstellen, dass sie fehlerfrei sind. CSS-Fehler können leicht versteckt und schwer zu beheben sein. Holen Sie sich also unbedingt jede mögliche Hilfe.

war immer gewesen W3C-Verifizierer Es ist der Goldstandard bei der CSS-Fehlerprüfung. Sie können zur Validierung eine URL, Datei oder Textkopie Ihrer Muster bereitstellen.

Wenn Ihre Stylesheets fehlerfrei sind, erhalten Sie eine freundliche Glückwunschnachricht und ein Badge, mit dem Sie die Richtigkeit Ihrer Webseiten bestätigen können. Das Anzeigen dieser Nachrichten ist nicht mehr erforderlich, Sie können dies jedoch tun, wenn Sie Ihre Fähigkeiten in Ihrem Portfolio oder auf Ihrer persönlichen Website präsentieren möchten.

Wenn es hingegen Probleme mit Ihrer Formatierung gibt, zeigt Ihnen der Prüfer detaillierte Fehlermeldungen mit einer Erklärung dazu an. Wie die meisten Fehler kann es schwierig sein, ihn zu verstehen, wenn Sie nicht damit vertraut sind. Überprüfen Sie daher den betroffenen Code, um das Problem zu identifizieren, bevor Sie versuchen, es zu beheben.

9. Browserkompatibilität prüfen

Ein weiterer wichtiger Aspekt der Stylesheet-Gültigkeit ist die plattformübergreifende Kompatibilität. Dieses Problem tritt heute viel seltener auf als früher, aber neuere CSS-Updates – einschließlich experimenteller Funktionen – werden nicht immer umfassend unterstützt. Glücklicherweise wird er es Ihnen sagen. Kann ich benutzen Und zwar mit CSS-Eigenschaften, die in jedem Browser funktionieren.

Die Informationen hier sind dicht, werden aber auf leicht verständliche Weise präsentiert. Sie müssen die Browser auswählen, die Sie unterstützen möchten, einschließlich des Vorgängers von Edge, Internet Explorer, und dessen Kompatibilität mit Computern. Die gute Nachricht ist, dass die meisten CSS optional sind und Sie Ihre Seiten so gestalten können, dass sie bei der Anzeige in nicht unterstützenden Browsern ordnungsgemäß beeinträchtigt werden.

10. Meistern Sie CSS-Typografie

Typografie ist ein grundlegendes Element jedes Designs und wurde im Web erst mit dem Aufkommen von CSS-Schriftarten ernst genommen. CSS war schon immer flexibel und unterstützt eine Schriftfamilie, die es Ihnen ermöglicht, je nach Verfügbarkeit eine bevorzugte Reihenfolge der zu verwendenden Schriftarten auszuwählen. Aber echte Webfonts geben Ihnen mehr Kontrolle über das Erlebnis und ermöglichen es allen Benutzern, Ihre Schriftart zu sehen, auch wenn sie sie nicht installiert haben.

betrachtet als Google-Schriften Als einer der besten Anbieter kostenloser Schriftarten ist die Auswahl riesig: zum Zeitpunkt des Schreibens fast 2000 Schriftfamilien.

 

Es stehen zahlreiche Optionen und Konfigurationen zur Verfügung, darunter unterschiedliche Schriftstärken, Unterstützung mehrerer Sprachen und Symbolschriftarten. Nachdem Sie die Schriftart nach Ihren Wünschen angepasst haben, kopieren Sie den Einbettungscode und fügen Sie ihn Ihrer HTML-Datei hinzu. Sie können die Schriftdateien auch herunterladen und lokal hosten, wenn Sie möchten.

Strukturiertes CSS sorgt nicht nur für eine besser aussehende Codedatei, sondern verbessert auch die Leistung, die Entwicklungsgeschwindigkeit und die Zusammenarbeit im Team. Beginnen Sie mit einem klaren Schreibstil, verwenden Sie verständliche Beschriftungen und vermeiden Sie Wiederholungen. Dies alles sind Schritte, die dafür sorgen, dass Ihr Code für Sie arbeitet, anstatt zu einer Belastung zu werden.

Je mehr Sie sich an den Grundsatz halten, „CSS ohne Komplexität zweckdienlich zu gestalten“, desto einfacher und schneller können Sie Ihr Design später ändern und erweitern. Beginnen Sie mit diesen einfachen Schritten und Sie werden feststellen, dass CSS Spaß machen und gleichzeitig organisiert sein kann.