Wenn du mit Webdesign anfängst, ist CSS ein Schlüsselelement, damit alles richtig funktioniert und so aussieht, wie du es haben willst. Das ist die Abkürzung für Cascading Style Sheets, mit denen du HTML-Elemente nach deinen Wünschen gestalten kannst.
Du kannst zwar auf verschiedene Arten mit CSS experimentieren – am häufigsten inline -, aber es gibt einen besseren Weg, das zu tun. Und das entspricht einer Reihe von Best Practices, die du befolgen solltest, um sicherzustellen, dass dein Code funktional, frei von unnötigem Ballast und gut organisiert ist.
Heute stellen wir dir 14 CSS-Best-Practices für Anfänger vor, aber auch erfahrene Profis sollten manchmal die Grundlagen auffrischen.
Schau dir unseren Video-Leitfaden mit den besten CSS-Praktiken für Einsteiger an
1. Organisieren des Stylesheets
Der erste Schritt bei der Anwendung von CSS-Best Practices ist die Organisation deiner Stylesheets. Wie du dabei vorgehst, hängt von deinem Projekt ab, aber als allgemeine Regel solltest du die folgenden Organisationsprinzipien beherzigen:
Sei konsistent
Egal, wie du dein CSS organisierst, achte darauf, dass du deine Entscheidungen im gesamten Stylesheet und auf deiner gesamten Webseite konsistent hältst.
Von der Benennung der Klassen über den Zeileneinzug bis hin zur Kommentarstruktur – wenn du alles einheitlich gestaltest, kannst du deine Arbeit leichter verfolgen. Außerdem sorgt es dafür, dass spätere Änderungen ohne Mühen vorgenommen werden können.
Verwende Zeilenumbrüche großzügig
Obwohl CSS auch dann funktioniert, wenn es optisch nicht ansprechend ist, ist es für dich und alle anderen Entwickler, die mit deinem Code arbeiten, besser, wenn du viele Zeilenumbrüche verwendest, um jeden Codeschnipsel getrennt und lesbar zu halten.
In der Regel ist es am besten, jede Eigenschaft und jedes Wertepaar in eine neue Zeile zu setzen.
Erstelle neue Abschnitte, wo es Sinn macht
Wie du deine Stylesheets einrichtest, hängt von der Art der Webseite ab, an der du arbeitest. Aber im Allgemeinen ist es eine gute Idee, Abschnitte für Stile so einzurichten, wie sie verwendet werden. Also einen Abschnitt für Textstile, einen Abschnitt für Listen und Spalten, einen Abschnitt für die Navigation und Links und so weiter. Du kannst auch Abschnitte für bestimmte Seiten erstellen, die anders gestaltet sind als der Rest, z. B. der Shop oder die FAQs.
Kommentiere deinen Code
Auch wenn nur du deinen CSS-Code zu sehen bekommst, ist es eine gute Idee, ihn sorgfältig zu kommentieren. Die Kommentare sehen wie folgt aus:
/* This is what a standard CSS comment looks like */So kannst du auf einen Blick erkennen, was die einzelnen Abschnitte miteinander zu tun haben, ohne später jede Zeile durchgehen zu müssen.
Kommentare können dir dabei helfen, Abschnitte zu definieren, aber du kannst sie auch verwenden, um dir einen Überblick über deine Entscheidungen zu verschaffen – vor allem, wenn du denkst, dass du sie später vergessen könntest.
Separate Stylesheets für größere Projekte verwenden
Das gilt nicht für jede Webseite, aber wenn du eine große Webseite hast, auf der du viele spezifische CSS-Funktionen benötigst, ist es eine gute Idee, mehrere Stylesheets zu verwenden. Niemand – auch du nicht – sollte lange scrollen müssen, um die benötigte Codezeile zu finden.
Vermeide diesen Aufwand und erstelle separate Stylesheets für die verschiedenen Bereiche der Webseite – vor allem, wenn sie völlig unterschiedliche Stile haben.
Du könntest z. B. ein Stylesheet für globale Stile erstellen und ein weiteres für deinen Onlineshop mit speziellen Stilen für Produktbeschreibungen, Überschriften oder Preise.
2. Inline-CSS vs. Externes CSS vs. Internes CSS
Es gibt drei verschiedene Arten von CSS, mit denen du bei der Erstellung einer Webseite und der Anpassung ihres Stils umgehen musst. Wir erklären dir kurz, was die einzelnen Arten sind und was sie bewirken, und besprechen dann, welche du für deine Projekte tatsächlich verwenden solltest.
- Inline-CSS. Damit kannst du bestimmte HTML-Elemente gestalten,
- Externes CSS. Dabei wird eine Datei wie ein Stylesheet verwendet, um die Webseite als Ganzes zu gestalten.
- Internes CSS. Damit kannst du eine ganze Seite und nicht nur bestimmte Elemente stylen.
Viele Entwickler raten davon ab, Inline-CSS zu verwenden, da es in der Regel nicht zwischengespeichert werden kann, und es wird empfohlen, CSS nicht auf mehrere Dateien aufzuteilen. Zumindest sollte es sparsam eingesetzt werden.
Wir sehen nur dann eine Notwendigkeit dafür, wenn du einen einzelnen Abschnitt, ein Stück Text oder einen Bereich auf einer einzelnen Seite deiner Webseite stylen möchtest. Das ist wahrscheinlich die einzige Situation, in der Inline-CSS eine praktikable Lösung ist.
Ansonsten ist die Verwendung von externem CSS oder internem CSS, je nach Bedarf, die bessere Option, da sie dir Zeit und Mühe erspart. Lege die Stile einmal fest und wende sie auf deine gesamte Webseite an. Bumm – fertig.
3. Verkleinere dein Stylesheet
Eine weitere bewährte CSS-Methode ist das Verkleinern deiner Stylesheets. Es gibt zahlreiche Minification-Tools, um die Ladezeiten deiner Stylesheets zu beschleunigen, auch direkt im Kinsta CDN.
So kannst du die Einstellungen für die Code-Minifizierung auf deiner gesamten Webseite anpassen.
4. Verwende einen Präprozessor
Mit einem Präprozessor wie Sass/SCSS kannst du Variablen und Funktionen verwenden, dein CSS besser organisieren und Zeit sparen. Sie ermöglichen es dir, CSS mit der Syntax des Präprozessors zu erstellen.
Das bedeutet, dass der Präprozessor eine Art „CSS +“ ist, d.h. er enthält eine Reihe von Funktionen, die normalerweise nicht in CSS selbst enthalten sind. Durch die Hinzufügung dieser Funktionen wird das ausgegebene CSS meist lesbarer und einfacher zu navigieren.
Du brauchst einen CSS-Compiler auf dem Server deiner Webseite, um die Präprozessoren zu nutzen. Zu den beliebtesten Präprozessoren gehören Sass, LESS und Stylus.
5. Erwäge ein CSS-Framework
CSS-Frameworks können in einigen Fällen nützlich sein, sind aber für viele unnötig, vor allem, wenn deine Webseite eher klein ist.
Frameworks können die schnelle Umsetzung großer Projekte erleichtern und Bugs vermeiden. Außerdem bieten sie den Vorteil der Standardisierung, was wichtig ist, wenn mehrere Personen gleichzeitig an einem Projekt arbeiten.
Alle verwenden die gleichen Benennungsverfahren, die gleichen Layout-Optionen, die gleichen Kommentierungsverfahren und so weiter.
Auf der anderen Seite führen sie aber auch zu allgemein aussehenden Webseiten und ein großer Teil des Codes kann am Ende ungenutzt bleiben.
Wahrscheinlich bist du schon einmal auf CSS-Frameworks gestoßen. Bootstrap und Foundation sind zwei der bekanntesten Beispiele. Andere Frameworks sind Tailwind CSS und Bulma.
6. Beginne mit einem Reset
Eine weitere Sache, die du schnell in die Praxis umsetzen kannst, ist, deine Entwicklungsarbeit mit einem CSS-Reset zu beginnen. Mit einem Programm wie normalize.css kannst du dafür sorgen, dass alle Browser die Seitenelemente einheitlich darstellen und dabei die aktuellsten Standards befolgen, um Unstimmigkeiten zwischen den Browsern zu vermeiden.
Bei diesem Reset handelt es sich eigentlich um eine kleine CSS-Datei, die du auf deine Webseite hochlädst, um das Styling von HTML-Elementen browserübergreifend konsistenter zu gestalten.
7. Klassen vs. IDs
Der nächste Punkt, auf den du bei der Einhaltung der CSS-Best Practices achten solltest, ist der Umgang mit Klassen und IDs. Falls du damit noch nicht vertraut bist, wollen wir beide kurz definieren:
- Klasse. Der Klassenselektor funktioniert, indem du ein Element mit einem Klassenattribut auswählst. Der Inhalt des Klassenattributs bestimmt, wie das HTML-Element ausgewählt wird. Im Code sieht es so aus: .classname
- ID. ID hingegen funktioniert, indem ein Element mit einem ID-Attribut ausgewählt wird. Das ID-Attribut muss mit dem Wert des Selektors übereinstimmen, damit es funktioniert. Du kannst eine ID in CSS an diesem Symbol erkennen: #.
Eine ID wird verwendet, um ein einzelnes Element auszuwählen, während eine Klasse verwendet wird, um mehr als ein Element auszuwählen. Mit einer ID kannst du einen Stil auf ein einzelnes HTML-Element anwenden. Mit einer Klasse wendest du eine Formatvorlage auf mehr als ein HTML-Element an. Wenn du diese allgemeine Regel befolgst, bleibt dein Code sauber und aufgeräumt und es gibt weniger unnötigen oder doppelten Code.
Ähnlich wie bei unserer obigen Diskussion über Inline- und externes CSS verwendest du eine ID, um einen Stil auf ein einzelnes Element anzuwenden. Grundsätzlich sind IDs für die Gestaltung von Ausnahmen auf der Seite gedacht, nicht für übergreifende Stile, die für die gesamte Seite oder Webseite gelten würden.
8. Redundanz vermeiden
Eine weitere bewährte CSS-Praxis besteht darin, Redundanz zu vermeiden, wann immer und wie immer du kannst. Hier sind ein paar allgemeine Tipps, wie du diese Praxis in deinem Arbeitsablauf umsetzen kannst:
Verwende die DRY-Methode
Die DRY-Methode steht für „Don’t Repeat Yourself“ (Wiederhole dich nicht) und besagt, dass du Code in CSS niemals wiederholen solltest. Denn im besten Fall ist es Zeitverschwendung und repetitiv, wenn du die Stile immer wieder manuell eingibst, im schlimmsten Fall kann es deine Webseite ausbremsen.
Es ist eine gute Praxis, deinen Code zu überprüfen, um Redundanzen zu entfernen. Es ist zum Beispiel nicht nötig, die Schriftgröße zweimal im selben Abschnitt zu kennzeichnen. Wenn du die Wiederholungen entfernst, liest sich dein Code besser und funktioniert auch besser.
Verwende die CSS-Kurzschrift
Die CSS-Kurzschrift ist eine großartige Möglichkeit, den Platzbedarf deines Codes zu reduzieren und trotzdem die gewünschte Leistung zu erzielen. Du kannst mehrere Stile in einer einzigen Zeile kombinieren, wenn dies sinnvoll ist. Wenn du z. B. die Stile für ein bestimmtes Div einstellst, kannst du den Rand, das Padding, die Schriftart, die Schriftgröße und die Farbe in einer einzigen Zeile auflisten.
Füge mehrere Klassen zu deinen Elementen hinzu
Wo es möglich ist, kannst du auch Redundanzen vermeiden, indem du einem Element mehr als eine Klasse zuweist. Wenn zum Beispiel der Inhalt deiner Seite dank der Klasse .left bereits links schwebend ist, du aber eine Spalte auf der Seite rechts positionieren möchtest, kannst du sie dem Element hinzufügen, um Verwirrung zu vermeiden und CSS genau mitzuteilen, welches Element zusätzlich zur standardmäßigen linken Ausrichtung rechts schwebend sein soll.
Und das Beste daran ist, dass du so viele Klassen zu einem Element hinzufügen kannst, wie du willst, solange sie durch ein Leerzeichen getrennt sind.
Kombiniere Elemente wo möglich
Anstatt die Elemente einzeln aufzulisten, kannst du sie kombinieren, um Platz und Zeit zu sparen. Oft haben Elemente in einem einzigen Stylesheet die gleichen (oder ähnliche) Stile. Es ist nicht nötig, die Schriftart, die Farbe und die Ausrichtung für jedes Textelement auf der Seite aufzulisten, wenn sie alle dasselbe Styling haben. Kombiniere sie stattdessen in einer einzigen Zeile wie dieser:
h1, h2, h3, p {
font-family: arial,
color: #00000
}Unnötige zusätzliche Selektoren vermeiden
Manchmal wird dein Code etwas unübersichtlich, wenn du an der endgültigen Gestaltung deiner Webseite arbeitest. Deshalb ist es wichtig, unnötige Selektoren im Nachhinein zu entfernen. Du solltest auch auf übermäßig komplexe Selektoren achten. Wenn du zum Beispiel Listen auf deiner Webseite gestalten willst, brauchst du keine Selektoren wie „body“ oder „container“ oder etwas in der Art zu verwenden. Ein.classname li { reicht aus.
9. Wie man Schriften richtig importiert
Der richtige Import und Einsatz von Schriftarten ist eine weitere Möglichkeit, um sicherzustellen, dass dein CSS klar, übersichtlich und optimiert ist.
@font-face zum Importieren von Schriftarten verwenden
Du kannst fast jede beliebige Schriftart in deine Webseite einfügen, aber du musst ein bestimmtes Verfahren befolgen, um sicherzustellen, dass sie richtig funktioniert.
- Lade die Schriftart herunter, die du verwenden möchtest. Es gibt viele Quellen für Schriftarten, darunter Google und Adobe. Vergewissere dich, dass du die TrueType-Font-Datei (.ttf) für deine gewählte Schriftart herunterlädst.
- Lade die benutzerdefinierte Schriftart, die du verwenden möchtest, in den Webfont-Generator hoch, der von Font Squirrel bereitgestellt wird. Lade das Webfont-Kit herunter, sobald es generiert ist. Es sollte mehrere Dateien enthalten, darunter mehrere verschiedene Schriftarten mit den Endungen .ttf, .woff, .woff2 und .eot. Es sollte auch eine CSS-Datei enthalten sein.
- Lade das Web Font Kit per FTP auf deine Webseite hoch. Die genauen Anweisungen dafür hängen von deinem Webhosting-Anbieter ab, aber im Allgemeinen kannst du mit einem FTP-Client oder dem Dateimanager in der Verwaltungsoberfläche deines Webhosts (z. B. cPanel) auf die Dateien deiner Website zugreifen.
- Aktualisiere die CSS-Datei mit einem Texteditor. Du kannst jeden beliebigen HTML-Texteditor wie NotePad oder Sublime verwenden. In dieser Datei wird eine „Quell-URL“ aufgeführt. Du musst diese aktualisieren, damit sie angibt, wo das Web Font Kit jetzt auf deinem Webserver liegt. Kopiere den Dateipfad, unter dem die einzelnen Schriftarten auf deinem Webserver gespeichert sind, wie folgt in diese Datei:
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}Du kannst deine neuen Schriftarten dann verwenden, indem du sie mit dem font-family-Tag in die CSS-Dateien deiner Webseite einfügst.
Um die Leistung deiner Webseite zu verbessern und um zu verhindern, dass sich das Layout deiner Webseite beim Laden verändert, kannst du Schriftarten vorladen. Das Vorladen von Schriften und das erste Laden von WOFF2-Schriften (oder der kleinsten Schriftgröße) kann die Leistung erheblich verbessern. Dazu fügst du eine Codezeile in den <head>-Tag ein. Better Web Type bietet ein prägnantes Beispiel:
<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">Eine weitere Möglichkeit ist, den Zeichensatz für deine benutzerdefinierten Schriftarten zu begrenzen. Wenn du nur ein paar Zeichen aus einer Schriftart verwendest (z. B. für eine Überschrift oder ein Logo), musst du nicht den gesamten Zeichensatz abrufen, sondern nur die, die du tatsächlich brauchst. Nach dem neuen Code müsstest du, um nur die Zeichen „Hallo“ abzurufen, wie folgt vorgehen:
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">Schriftarten selbst hosten, wenn möglich
Das oben beschriebene Verfahren gilt für selbst gehostete Schriftarten, aber es ist wichtig zu wiederholen, dass dies die beste Methode ist. Sie verkürzt die Ladezeit erheblich und bedeutet, dass du dich nicht auf die Geschwindigkeit einer anderen Webseite verlassen musst, um den Ladevorgang deiner Webseite abzuschließen.
Sei vorsichtig mit Schriftvariationen
Schriftvariationen können sehr nützlich sein, um deiner Webseite einen lustigen Stil zu verleihen. Wenn sie jedoch falsch eingesetzt werden, können sie deine Webseite auch zerstören.
Wenn du mehr als einen Stil unter den Einstellungen für Schriftvariationen zuweist, ist es wahrscheinlich, dass sie sich überschneiden und einer den anderen außer Kraft setzt. Es ist viel besser, die Dinge einfach zu halten und stattdessen die Schrifteigenschaften zu verwenden, wie hier gezeigt:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Verwende eine Ausweichschrift
Auch wenn du dir die Mühe machst, eine benutzerdefinierte Schriftart zu deiner Webseite hinzuzufügen und sie per CSS zu verwenden, wird sie nicht immer zu 100 % funktionieren – vor allem nicht, wenn sie von jemandem mit einem veralteten Webbrowser aufgerufen wird. Du willst aber trotzdem, dass deine Besucher ein angenehmes Surferlebnis haben.
Deshalb ist es wichtig, eine Ersatzschriftart festzulegen, die verwendet werden kann, wenn keine andere Schriftart verwendet werden kann. Dazu führst du bei der Zuweisung einer Schriftart die Ausweichschrift hinter deiner bevorzugten Schriftart auf. Auf diese Weise ruft das CSS zuerst deine bevorzugte Schriftart auf, dann deine zweite Wahl, dann deine dritte und so weiter.
Laut W3Schools gibt es fünf Hauptkategorien für Schriftfamilien. Im Folgenden findest du eine Liste dieser Familien mit beliebten Ausweichschriften, die zu jeder Familie gehören.
- Serif: Times New Roman, Georgia, Garamond
- Sans-serif : Arial, Tahoma, Helvetica
- Monospace: Courier New
- Kursiv: Brush Script MT
- Fantasie: Copperplate, Papyrus
10. CSS barrierefrei gestalten
Jeder sollte seine Webseite barrierefrei gestalten – ohne Umschweife. Das gilt auch für deinen Umgang mit CSS. Dein Ziel sollte es sein, deine Webseite für so viele Menschen wie möglich nutzbar zu machen, und die Umsetzung von Maßnahmen zur Barrierefreiheit ist eine fantastische Möglichkeit, dies zu erreichen.
Du kannst dein CSS auf verschiedene Arten zugänglich machen:
- Füge Farbvariationen zu Links hinzu, um sie hervorzuheben.
- Sorge dafür, dass Pop-ups durch Drücken der ESC-Taste geschlossen werden können. Menschen, die Screenreader oder Vergrößerungsprogramme benutzen, können das „X“ auf dem Bildschirm oft nicht sehen, um ein Pop-up zu schließen.
- Auf manchen Geräten werden Pop-ups gar nicht erst angezeigt, daher solltest du sicherstellen, dass alle wichtigen Informationen auf andere Weise vermittelt werden.
- Hover-Elemente (wie z. B. Tooltips) sollten sowohl durch die Tabulatortaste als auch durch einen Maus-Hover ausgelöst werden.
- Entferne keine Umrisse. Browser zeigen automatisch einen Umriss um Elemente an, auf die die Tastatur gerade fokussiert ist. Du kannst diesen Umriss mit outline:none deaktivieren, aber das solltest du wirklich nicht tun, denn er ist von unschätzbarem Wert für Menschen, die Screenreader benutzen oder schlecht sehen und zusätzliche Hervorhebungen/Fokuspunkte für die Navigation benötigen.
- Verbessere den Fokusindikator. Wie oben erwähnt, sind Umrisse um hervorgehobene Elemente für viele Menschen wichtig für die Navigation, aber der Standardumriss ist oft kaum sichtbar. Du kannst sie sichtbarer machen, indem du mit:focus einen Stil einstellst, der mehr Aufmerksamkeit auf das lenkt, was gerade im Fokus ist. Etwas Ähnliches kannst du mit :hover machen, um die Cover-Effekte zu verbessern. Ein gutes Beispiel für die Verwendung von :focus in der Praxis stammt aus den Zugänglichkeitsrichtlinien der University of Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}Dieses Codeschnipsel sorgt dafür, dass Links als schwarzer Text auf weißem Hintergrund angezeigt werden, sich aber in weißen Text auf weißem Hintergrund verwandeln, wenn der Tastaturfokus gesetzt wird (wenn der Nutzer mit der Tabulatortaste auf das Element zeigt). Derselbe Effekt tritt auch auf, wenn du den Mauszeiger über das Element bewegst.
11. Benennungskonventionen einführen
Es mag im Moment unbedeutend erscheinen, aber die Entscheidung, wie du Dinge in CSS benennst, kann dauerhafte Auswirkungen haben – und dich in Zukunft Zeit und Geld kosten, wenn du es nicht richtig machst. Bevor du mit dem Schreiben von CSS beginnst, solltest du eine Reihe von Namenskonventionen festlegen und dich daran halten.
Das spart dir später viel Zeit bei der Fehlersuche, da du beim Schreiben deines Codes seltener auf das falsche Element verweist. Laut FreeCodeCamp ist es ein guter Ansatz, sich an die Standardformatierung für CSS-Namen zu halten, d.h. font-weight vs. fontWeight.
Verwende die BEM-Namenskonvention
Ein guter Weg, um die Namen einheitlich zu halten, ist die BEM-Namenskonvention. Der Sinn von BEM ist es, die Benutzeroberfläche in Komponenten aufzuteilen, die immer wieder verwendet werden können.
BEM steht für Block, Element und Modifikator. Aber schauen wir uns an, was das eigentlich bedeutet.
- Block : Ein Block kann ein beliebiges Element auf deiner Webseite sein, z. B. ein Menü, eine Kopfzeile, eine Fußzeile oder eine Spalte. Deine Blöcke sollten Namen wie .main-nav oder .footer haben.
- Element. Elemente beschreiben die Teile, aus denen die einzelnen Blöcke bestehen. Denke dabei an Dinge wie Schriftarten, Farben, Schaltflächen, Listen oder Links. In der BEM-Namenskonvention werden Elemente durch zwei Unterstriche vor dem Namen des Elements gekennzeichnet. Wenn wir also über die Schriftart in der Kopfzeile deiner Webseite sprechen wollen, würde sie in CSS mit der BEM-Namenskonvention wie folgt aussehen: .header__font
- Modifikator. Das letzte Teil des BEM-Puzzles ist der Modifikator. Mit Modifikatoren legst du das Styling des Elements innerhalb des Blocks fest. Dazu gehören Dinge wie Schriftart, -stärke und -größe, Farbwerte und Ausrichtungswerte. Wenn du mit dem obigen Beispiel weitermachen möchtest, um die Schriftfarbe in der Kopfzeile festzulegen, würdest du das Element und den Modifikator durch zwei Bindestriche getrennt schreiben: .header__font-red
Wenn du dich an diese Namenskonvention hältst – oder an eine andere, die dein Team festlegt -, kann das spätere Bearbeiten und Debuggen viel angenehmer sein.
12. Vermeide den !Important Tag
Eine weitere Best Practice, die du in deine CSS-Arbeitsroutine einbauen solltest, ist die Vermeidung der übermäßigen Verwendung des !important-Tags, so weit es geht.
Er kann zwar Probleme beheben, aber seine Verwendung führt oft dazu, dass man sich auf ihn als Stütze verlässt. Und das kann dazu führen, dass du überall in deinem Code ein Durcheinander von !important-Tags hast, das deine Webseite kaputt machen kann.
Es kommt also auf die Spezifität an. Wenn ein Selektor sehr spezifisch ist, wird dein Webbrowser ihn als wichtiger einstufen als bei weniger spezifischen Selektoren. Das !important-Tag kann verwendet werden, um Eigenschaften zu kennzeichnen, die wichtiger sind als andere.
Das kann knifflig werden, denn oft musst du mehrere !important-Tags verwenden, um in bestimmten Situationen die vorherigen Tags zu überschreiben. Wenn du das zu oft machst, kann das dazu führen, dass deine Webseite nicht mehr funktioniert oder deine Styles nicht richtig geladen werden. Meistens wird dieses Tag als kurzfristige Lösung verwendet, aber oft wird es dauerhaft und kann später zu Problemen führen, vor allem, wenn es Zeit ist, Fehler zu beheben.
Einer der wenigen Fälle, in denen die Verwendung des !important-Tags allgemein als akzeptabel gilt, ist die Möglichkeit für den Endnutzer, Stile für die Verwendung mit Screenreadern und anderen Zugänglichkeitshilfen außer Kraft zu setzen. Es ist auch nützlich, wenn du mit Utility-Klassen arbeitest.
13. Flexbox verwenden
Wenn du versuchst, Best Practices für den Umgang mit CSS in deinen Arbeitsablauf zu integrieren, kannst du auch Flexbox nutzen. Flexbox ist eine flexible Methode, um ein Weblayout zu erstellen und Elemente auf der Seite auszurichten, anstatt die traditionelle float-Option zu verwenden.
Laut CSS-Tricks ist Flexbox ein flexibles Boxmodul, das eine alternative Möglichkeit ist, dein CSS zu strukturieren, indem du darauf achtest, wie deine Layouts in einem Container ausgerichtet und verteilt werden. Das Beste daran ist, dass die Größe des Containers selbst nicht einmal bekannt sein muss, sondern dass sich die darin enthaltenen Eigenschaften an die veränderte Containergröße anpassen. Das ist eine großartige Möglichkeit, sich an mobile Geräte anzupassen.
Ein weiterer wichtiger Unterschied ist, dass Flexbox richtungsunabhängig ist, d. h. die Layouts sind weder vertikal noch horizontal strukturiert. Das macht sie zu einer besseren Wahl für die Gestaltung komplizierter Webseiten und Anwendungen, die viele Änderungen der Bildschirmausrichtung zulassen müssen. Standard-CSS-Layouts sind blockbasiert, während Flexbox-Layouts auf dem „Flex-Flow“ basieren. Auch hier bietet CSS-Tricks eine übersichtliche Zeichnung, die dieses Konzept gut veranschaulicht:
Die Elemente in der Flexbox werden auf der Haupt- und der Querachse angeordnet, wobei jedes Element und jede Eigenschaft so gestaltet ist, dass sie sich je nach Größe des Flexcontainers biegen und fließen.
14. WordPress-Tipp: Ändere nicht direkt die Themendateien
Die letzte der besten CSS-Praktiken, die wir heute besprechen, richtet sich speziell an WordPress-Nutzer. Es ist nie eine gute Idee, die Dateien deines Themes direkt zu ändern. Jede Aktualisierung der Webseite könnte diese Änderungen zunichte machen oder deine Webseite zerstören. Das Risiko ist es nicht wert.
Stattdessen kannst du die Option Zusätzliches CSS im Theme Customizer verwenden, um alle gewünschten Änderungen vorzunehmen. Du solltest jedoch bedenken, dass dadurch das CSS inline und direkt im Head platziert wird.
Wenn du nur ein oder zwei Änderungen vornehmen möchtest, kann dies eine gute Option sein, aber alles, was du im Feld Zusätzliches CSS einfügst, bleibt bestehen, auch wenn du ein Theme-Update oder eine Webseiten-Aktualisierung durchführst oder sogar das Theme wechselst.
Wenn du umfangreichere CSS-Änderungen vornehmen musst, ist es besser, diese in einem benutzerdefinierten CSS-Stylesheet vorzunehmen oder ein Child-Theme zu verwenden, in dem du die style.css-Datei für das Child-Theme direkt änderst. Diese Methode ist außerdem updatesicher.
Zusammenfassung
Sich kopfüber in die Erstellung von nützlichem und korrektem CSS zu stürzen, mag sich für einen echten Neuling gewaltig anfühlen, aber wenn du dir die Zeit nimmst, dich über die besten Praktiken zu informieren, kannst du dir später viel Zeit, Mühe und Kopfschmerzen sparen.
Wir hoffen, dass diese Sammlung von Best Practices dir hilft, den richtigen Weg zu finden, um funktionale, nützliche und barrierefreie Webseiten für die nächsten Jahre zu erstellen. Viel Erfolg!
Schreibe einen Kommentar