14 Best Practices für CSS für Anfänger

Wenn Sie mit dem Webdesign beginnen, liegt ein Schlüsselelement dafür, dass alles richtig funktioniert und so aussieht, wie es aussehen soll, in den Händen von CSS. Das ist die Abkürzung für Cascading Style Sheets, und sie funktionieren, indem sie es Ihnen ermöglichen, HTML-Elemente so zu gestalten, wie Sie es möchten.

Und während Sie mit CSS auf viele verschiedene Arten experimentieren können – meistens inline –, gibt es einen besseren Weg, dies zu tun. Und das steht im Einklang mit einer Reihe von Best Practices, die Sie befolgen sollten, um sicherzustellen, dass Ihr Code funktionsfähig, frei von unnötiger Masse und gut organisiert ist.

Heute werden wir 14 Best Practices für CSS für Anfänger hervorheben, aber selbst erfahrene Profis sollten die Grundlagen manchmal auffrischen.

1. Organisieren Sie das Stylesheet

Ihre erste Aufgabe bei der Anwendung von CSS Best Practices besteht darin, Ihre Stylesheets zu organisieren. Wie Sie dies angehen, hängt von Ihrem Projekt ab, aber in der Regel sollten Sie sich an die folgenden Organisationsprinzipien halten:

Seien Sie konsequent

Unabhängig davon, wie Sie Ihr CSS organisieren, stellen Sie sicher, dass Ihre Auswahl im gesamten Stylesheet sowie auf Ihrer gesamten Website konsistent bleibt.

Von der Benennung von Klassen über Zeileneinrückungen bis hin zu Kommentarstrukturen: Wenn Sie alles konsistent halten, behalten Sie leichter den Überblick über Ihre Arbeit. Außerdem stellt es sicher, dass spätere Änderungen problemlos vorgenommen werden können.

Verwenden Sie Zeilenumbrüche großzügig

Obwohl CSS auch dann funktioniert, wenn es visuell hässlich ist, ist es für Sie und alle anderen Entwickler, die mit Ihrem Code arbeiten, besser, wenn Sie viele Zeilenumbrüche verwenden, um jedes Code-Snippet getrennt und lesbar zu halten.

In der Regel ist es am besten, jedes Paar aus Eigenschaft und Wert in einer neuen Zeile zu platzieren.

Erstellen Sie neue Abschnitte, wo es sinnvoll ist

Auch hier hängt die Einrichtung Ihrer Stylesheets weitgehend von der Art der Site ab, an der Sie arbeiten. Aber im Allgemeinen ist es eine gute Idee, Abschnitte für Stile einzurichten, da sie verwendet werden. Also einen Abschnitt für Textstile, einen Abschnitt für Listen und Spalten, einen Abschnitt für Navigation und Links und so weiter. Sie können sogar Abschnitte für bestimmte Seiten erstellen, die möglicherweise ein anderes Design haben als der Rest, wie der Shop oder die FAQs.

Kommentieren Sie Ihren Code

Selbst wenn nur Sie Ihr CSS jemals sehen werden, ist es dennoch eine gute Idee, mit Ihren Kommentaren gründlich zu sein. Kommentare sehen wie folgt aus:

 /* This is what a standard CSS comment looks like */

So können Sie auf einen Blick leichter erkennen, worum es in den einzelnen Abschnitten geht, ohne später jede Zeile durchforsten zu müssen.

Kommentare können Ihnen beim Definieren von Abschnitten helfen, aber Sie können sie auch verwenden, um Einblicke in die von Ihnen getroffenen Entscheidungen zu geben – insbesondere, wenn Sie glauben, dass Sie sie später vergessen könnten.

Verwenden Sie separate Stylesheets für größere Projekte

Dies gilt nicht für jede Website, aber wenn Sie eine große Website haben, die viele spezifische CSS benötigt, ist die Verwendung mehrerer Stylesheets eine gute Idee. Niemand – Sie eingeschlossen – sollte sehr lange scrollen müssen, um die einzelne Codezeile zu finden, die Sie benötigen.

Vermeiden Sie den Ärger und erstellen Sie separate Stylesheets für verschiedene Website-Bereiche – insbesondere, wenn sie völlig unterschiedliche Stile haben.

Beispielsweise möchten Sie möglicherweise ein Stylesheet für globale Stile und ein weiteres für Ihren Online-Shop mit speziellem Design für Produktbeschreibungen, Überschriften oder Preise erstellen.

2. Inline-CSS vs. externes CSS vs. internes CSS

Es gibt drei verschiedene Arten von CSS, mit denen Sie sich möglicherweise befassen müssen, wenn Sie eine Website erstellen und ihr Design anpassen. Lassen Sie uns ein wenig darüber sprechen, was die einzelnen sind und tun, und dann besprechen, welche Sie tatsächlich für Ihre Projekte verwenden sollten.

• Inline-CSS. Auf diese Weise können Sie bestimmte HTML-Elemente formatieren,
• Externes CSS . Dies beinhaltet die Verwendung einer Datei wie z. B. eines Stylesheets, um die Website als Ganzes zu gestalten.
• Internes CSS. Auf diese Weise können Sie anstelle bestimmter Elemente eine ganze Seite gestalten.

Viele Entwickler empfehlen, Inline-CSS überhaupt zu vermeiden, da es normalerweise nicht zwischengespeichert werden kann, und es wird empfohlen, CSS nicht auf mehrere Dateien aufzuteilen. Zumindest sollte es sparsam verwendet werden.

Wir sehen wirklich nur einen Bedarf dafür, wenn Sie ein bisschen Styling für einen einzelnen Abschnitt, ein bisschen Text oder einen Bereich einer einzelnen Seite Ihrer Website verwenden würden. Dies ist wahrscheinlich die einzige Situation, in der Inline-CSS eine praktikable Lösung darstellt.

Abgesehen davon ist die Verwendung von externem CSS oder internem CSS je nach Bedarf die bessere Option, da Sie Zeit und Mühe sparen. Legen Sie die Stile einmal fest und wenden Sie sie auf Ihrer gesamten Website an. Bumm – fertig.

3. Minimieren Sie Ihr Stylesheet

Eine weitere Best Practice für CSS ist das Minimieren Ihrer Stylesheets. Es stehen zahlreiche Minifizierungstools zur Verfügung, um die Ladezeiten für deine Stylesheets zu beschleunigen, einschließlich direkt innerhalb des Kinsta CDN.

Auf diese Weise können Sie die Code-Minifizierungseinstellungen für Ihre gesamte Website anpassen.

4. Verwenden Sie einen Präprozessor

Mit einem Präprozessor wie Sass/SCSS können Sie Variablen und Funktionen verwenden, Ihr CSS besser organisieren und Zeit sparen. Sie funktionieren, indem sie es Ihnen ermöglichen, CSS aus der Präprozessorsyntax zu erstellen.

Das bedeutet, dass der Präprozessor wie ein „CSS +“ ist, wo er ein paar Funktionen enthält, die normalerweise nicht in CSS selbst vorhanden sind. Das Hinzufügen dieser Funktionen macht das Ausgabe-CSS meistens lesbarer und einfacher zu navigieren.

Sie benötigen einen CSS-Compiler auf dem Server Ihrer Website, um Präprozessoren verwenden zu können. Einige der beliebtesten Vorprozessoren sind Sass, LESS und Stylus.

5. Betrachten Sie ein CSS-Framework

CSS-Frameworks können in einigen Fällen nützlich sein, sind aber für viele Menschen möglicherweise unnötig, insbesondere wenn Ihre Website eher klein ist.

Frameworks können die schnelle Bereitstellung großer Projekte erleichtern und auch Fehler vermeiden. Und sie bieten den Vorteil der Standardisierung, was unerlässlich ist, wenn mehrere Personen gleichzeitig an einem Projekt arbeiten.

Jeder wird die gleichen Benennungsverfahren, die gleichen Layoutoptionen, die gleichen Kommentarverfahren und so weiter verwenden.

Andererseits führen sie auch zu generisch aussehenden Websites, und ein Großteil des Codes kann am Ende ungenutzt bleiben.

Wahrscheinlich sind Sie schon einmal auf CSS-Frameworks gestoßen. Bootstrap und Foundation sind zwei der bekanntesten Beispiele. Andere Frameworks sind Tailwind CSS und Bulma.

6. Beginnen Sie mit einem Reset

Eine andere Sache, die Sie schnell in die Praxis umsetzen sollten, ist, Ihre Entwicklungsarbeit mit einem CSS-Reset zu beginnen. Die Verwendung von etwas wie normalize.css kann dazu führen, dass alle Browser Seitenelemente auf konsistente Weise rendern, während sie den aktuellsten Standards folgen, um Browser-Inkonsistenzen zu minimieren.

Dieses Zurücksetzen ist eigentlich eine kleine CSS-Datei, die Sie auf Ihre Website hochladen, um dem Design von HTML-Elementen ein höheres Maß an browserübergreifender Konsistenz zu verleihen, und dient als aktualisierte Methode zum Durchführen eines CSS-Zurücksetzens.

7. Klassen vs. IDs

Das nächste, worauf Sie achten sollten, wenn Sie CSS Best Practices befolgen, ist, wie Sie Klassen und IDs behandeln. Falls Sie nicht vertraut sind, definieren wir beide kurz:

• Klasse. Der Klassenselektor funktioniert, indem er ein Element mit einem Klassenattribut auswählt. Was im class-Attribut steht, bestimmt, wie das HTML-Element ausgewählt wird. Im Code sieht es so aus: .classname
• ICH WÜRDE. ID hingegen funktioniert, indem ein Element mit einem ID-Attribut ausgewählt wird. Das ID-Attribut muss mit dem Wert des Selektors identisch sein, damit es funktioniert. Sie können 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. Sie würden eine ID verwenden, um einen Stil auf ein einzelnes HTML-Element anzuwenden. Sie würden eine Klasse verwenden, um einen Stil auf mehr als ein HTML-Element anzuwenden. Das Befolgen dieser allgemeinen Regel trägt dazu bei, Ihren Code sauber und ordentlich zu halten, und reduziert außerdem das Vorkommen von unnötigem oder doppeltem Code.

Ähnlich wie bei unserer obigen Diskussion über Inline vs. externes CSS verwenden Sie eine ID, um einen Stil auf ein einzelnes Element anzuwenden. Grundsätzlich sollen IDs für die Gestaltung der Ausnahmen auf der Seite verwendet werden, nicht für übergreifende Stile, die für die gesamte Seite oder Website gelten würden.

8. Redundanz vermeiden

Eine weitere bewährte CSS-Methode besteht darin, Redundanzen zu vermeiden, wann und wie immer Sie können. Hier sind ein paar allgemeine Tipps, die Sie befolgen sollten, um diese Praxis auf Ihren Arbeitsablauf anzuwenden:

Verwenden Sie die DRY-Methode

Die DRY-Methode steht für „Don’t Repeat Yourself“ und ist im Grunde die Idee, Code in CSS niemals zu wiederholen. Denn im besten Fall ist es Zeitverschwendung und Wiederholung für Sie, diese Stile immer und immer wieder manuell einzugeben, im schlimmsten Fall kann es Ihre Website aktiv verlangsamen.

Es empfiehlt sich, Ihren Code zu überprüfen, um Redundanzen zu entfernen. Es ist nicht erforderlich, dass Tags beispielsweise die Schriftgröße zweimal im selben Abschnitt angeben. Entfernen Sie die Wiederholungen und Ihr Code wird besser gelesen und funktioniert auch besser.

Verwenden Sie CSS-Kurzschrift

CSS-Kurzschrift ist eine großartige Möglichkeit, den Platzbedarf Ihres Codes zu reduzieren und dennoch so zu funktionieren, wie er sollte. Sie können mehrere Stile innerhalb einer Linie kombinieren, wenn dies sinnvoll ist. Wenn Sie beispielsweise die Stile eines bestimmten div festlegen, können Sie den Rand, die Auffüllung, die Schriftart, die Schriftgröße und die Farbe in einer einzigen Zeile auflisten.

Fügen Sie Ihren Elementen mehrere Klassen hinzu

Gegebenenfalls können Sie Redundanzen auch vermeiden, indem Sie einem Element mehr als eine Klasse hinzufügen. Wenn beispielsweise der Inhalt Ihrer Seite dank der Klasse .left bereits nach links schwebt, Sie aber eine Spalte auf der Seite rechts positionieren möchten, können Sie dies dem Element hinzufügen, um Verwirrung zu vermeiden und CSS genau mitzuteilen, welches Element Sie verwenden möchte über der standardmäßigen linken Ausrichtung nach links schweben.

Und das Beste daran ist, dass Sie einem Element so viele Klassen hinzufügen können, wie Sie möchten, solange es durch ein Leerzeichen getrennt ist.

Kombinieren Sie Elemente wo möglich

Anstatt Elemente einzeln aufzulisten, kombinieren Sie sie, um Platz und Zeit zu sparen. Häufig haben Elemente innerhalb eines einzelnen Stylesheets dieselben (oder ähnliche) Stile. Es ist nicht nötig, die Schriftart, Farbe und Ausrichtung für jedes Textelement auf der Seite aufzulisten, wenn sie alle denselben Stil haben. Kombinieren Sie sie stattdessen wie folgt zu einer einzigen Zeile:

 h1, h2, h3, p { font-family: ariel, color: #00000 }

Vermeiden Sie unnötige zusätzliche Selektoren

Manchmal wird Ihr Code etwas chaotisch, wenn Sie daran arbeiten, das Design Ihrer Website fertigzustellen. Aus diesem Grund ist es wichtig, zurückzugehen und unnötige Selektoren nachträglich zu entfernen. Sie sollten auch nach zu komplexen Selektoren Ausschau halten. Wenn Sie beispielsweise Listen auf Ihrer Website formatieren möchten, müssen Sie keine Selektoren wie „Body“ oder „Container“ oder ähnliches verwenden. Nur .classname li { reicht aus.

9. So importieren Sie Schriftarten richtig

Das richtige Importieren und Verwenden von Schriftarten ist eine weitere Möglichkeit, um sicherzustellen, dass Ihr CSS klar, prägnant und optimiert ist.

Verwenden von @font-face zum Importieren von Schriftarten

Sie können Ihrer Website fast jede gewünschte Schriftart hinzufügen, aber Sie müssen ein bestimmtes Verfahren befolgen, um sicherzustellen, dass sie ordnungsgemäß funktioniert.

1. Laden Sie die Schriftart herunter, die Sie verwenden möchten. Es gibt viele Orte, an denen Sie Schriftarten beziehen können, darunter Google und Adobe. Stellen Sie sicher, dass Sie die TrueType-Schriftartdatei (.ttf) für die von Ihnen gewählte Schriftart herunterladen.
2. Laden Sie die benutzerdefinierte Schriftart, die Sie verwenden möchten, in den von Font Squirrel bereitgestellten Webfont-Generator hoch. Laden Sie das Web Font Kit herunter, sobald es generiert wurde. Es sollte mehrere Dateien enthalten, darunter mehrere verschiedene Schriftartdateien mit Erweiterungen wie .ttf, .woff, .woff2 und .eot. Es sollte auch eine CSS-Datei enthalten sein.
3. Laden Sie das Web Font Kit per FTP auf Ihre Website hoch. Die spezifischen Anweisungen dafür variieren je nach Webhosting-Anbieter, aber im Allgemeinen können Sie auf die Dateien Ihrer Website mit einem FTP-Client oder dem Dateimanager auf der Verwaltungsoberfläche Ihres Webhosts wie cPanel zugreifen.
4. Aktualisieren Sie die CSS-Datei mit einem Texteditor. Jeder HTML-Texteditor, den Sie bevorzugen, funktioniert wie NotePad oder Sublime. In dieser Datei wird eine „Quell-URL“ aufgeführt. Sie müssen dies aktualisieren, um anzuzeigen, wo das Web Font Kit jetzt auf Ihrem Webserver untergebracht ist. Kopieren Sie den Dateipfad, in dem jede Schriftartdatei auf Ihrem Webhost gespeichert ist, 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"); }

Anschließend können Sie Ihre neuen Schriftarten verwenden, indem Sie sie mit dem Font-Family- Tag zu den CSS-Dateien Ihrer Website hinzufügen.

Sie können Schriftarten vorab laden, um die Leistung der Website zu verbessern und seltsame Neuanpassungen des Layouts Ihrer Website beim Laden zu verhindern. Das Vorladen von Schriftarten und das Laden von WOFF2-Schriftarten (oder ansonsten der kleinsten Schriftgröße) kann die Leistung erheblich verbessern. Dazu fügen Sie dem <head> -Tag eine Codezeile hinzu. 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">

Sie können auch den Zeichensatz für Ihre benutzerdefinierten Schriftarten einschränken. Wenn Sie nur wenige Zeichen aus einer Schriftart verwenden (z. B. für eine Kopfzeile oder ein Logo), müssen Sie nicht den gesamten Zeichensatz aufrufen, sondern nur einige wenige, die Sie tatsächlich benötigen. Gemäß dem neuen Code würden Sie dies wie folgt tun, um nur die Zeichen „Hallo“ anzufordern:

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Selbst gehostete Schriftarten, wenn möglich

Der oben beschriebene Prozess gilt für selbst gehostete Schriftarten, aber es ist wichtig zu wiederholen, dass dies der beste Ansatz ist. Es beschleunigt die Ladezeit erheblich und bedeutet, dass Sie sich nicht auf die Geschwindigkeit einer anderen Website verlassen müssen, um den Ladevorgang Ihrer Website abzuschließen.

Seien Sie vorsichtig mit Schriftvariationen

Schriftartvariationen können sehr nützlich sein, um Ihrer Website lustige Stile hinzuzufügen. Bei Missbrauch können sie jedoch auch Ihre Website beschädigen.

Wenn Sie mehr als einen Stil unter font-variation-settings zuweisen, ist es wahrscheinlich, dass sie sich überlappen und einer den anderen überschreibt. Sie sind viel besser dran, die Dinge einfach zu halten und stattdessen Schrifteigenschaften zu verwenden, wie hier dargestellt:

 .bold { font-weight: bold; } .italic { font-style: italic; }

Verwenden Sie eine Fallback-Schriftart

Obwohl Sie sich vielleicht die Mühe machen, Ihrer Website eine benutzerdefinierte Schriftart hinzuzufügen und sie über CSS zu verwenden, wird sie immer noch nicht zu 100 % funktionieren – insbesondere, wenn sie von jemandem mit einem veralteten Webbrowser aufgerufen wird. Aber Sie möchten dennoch, dass diese Website-Besucher ein angenehmes Surferlebnis haben.

Um dies zu berücksichtigen, ist es wichtig, eine Fallback-Schriftart festzulegen, die verwendet werden kann, wenn keine Ihrer anderen Schriftarten verwendet werden kann. Dazu würden Sie einfach die Fallback -Schriftart nach Ihrer bevorzugten Schriftart auflisten, wenn Sie eine Schriftfamilie zuweisen. Auf diese Weise ruft das CSS zuerst Ihre bevorzugte Schriftart auf, dann Ihre zweite Wahl, dann Ihre dritte und so weiter.

Laut W3Schools gibt es fünf Hauptkategorien für Schriftfamilien. Was folgt, ist eine Liste dieser Familien mit beliebten Fallback-Schriftarten, die in jede Familie passen.

• Serifen: Times New Roman, Georgia, Garamond
• Serifenlos: Arial, Tahoma, Helvetica
• Monospace: Courier Neu
• Kursiv: Pinselschrift MT
• Fantasie: Kupferstich, Papyrus

10. Machen Sie CSS zugänglich

Jeder sollte seine Websites zugänglich machen – aus nächster Nähe. Und das gilt auch für Ihre Herangehensweise an CSS. Ihr Ziel sollte es sein, Ihre Website 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.

Sie können Ihr CSS auf verschiedene Weise zugänglich machen:

• Fügen Sie Links Farbvariationen hinzu, um sie hervorzuheben.
• Blenden Sie Popups aus, indem Sie die ESC-Taste drücken. Diejenigen, die Screenreader oder Vergrößerung verwenden, können das „X“ auf dem Bildschirm oft nicht sehen, um ein Popup zu schließen, daher ist es wichtig, sie per Tastendruck zu schließen.
• Einige Geräte zeigen Pop-ups gar nicht erst an, stellen Sie also sicher, dass alle wichtigen Informationen an anderer Stelle übermittelt werden.
• Hover-Elemente (wie Tooltips) sollten sowohl durch die Tab-Taste als auch durch einen Maus-Hover ausgelöst werden.
• Entfernen Sie keine Umrisse. Browser zeigen einen Umriss um Elemente an, auf die die Tastatur derzeit automatisch fokussiert ist. Sie können dies mit outline:none deaktivieren, aber Sie sollten es wirklich nicht tun, da es für diejenigen von unschätzbarem Wert ist, die Bildschirmlesegeräte verwenden oder eine Sehbehinderung haben und zusätzliche Hervorhebungs-/Fokuspunkte für die Navigation benötigen.
• Verbessern Sie die Fokusanzeige. Wie oben erwähnt, sind Umrisse um hervorgehobene Elemente für viele unerlässlich für die Navigation, aber der Standardumriss ist oft kaum sichtbar. Sie können dies so ändern, dass es besser sichtbar ist, indem Sie mit :focus einen Stil festlegen, der mehr Aufmerksamkeit auf das lenkt, was gerade im Fokus ist. Sie können etwas Ähnliches mit :hover tun, um Cover-Effekte zu verbessern. Ein gutes Beispiel für die Änderung von :focus in Aktion ist eine Reihe von 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 Code-Snippet sorgt dafür, dass Links als schwarzer Text auf weißem Hintergrund angezeigt werden, aber zu weißem Text auf einem Hintergrund wechseln, wenn sie unter den Tastaturfokus gestellt werden (wenn der Benutzer auf das Element tippt). Derselbe Effekt tritt auch beim Schweben auf.

11. Implementieren Sie Namenskonventionen

Es mag im Moment klein erscheinen, aber was Sie in CSS benennen, kann nachhaltige Auswirkungen haben – und Sie in Zukunft aktiv Zeit und Geld kosten, wenn es nicht richtig gemacht wird. Bevor Sie überhaupt mit dem Schreiben von CSS beginnen, sollten Sie sich für eine Reihe von Namenskonventionen entscheiden und diese einhalten.

Dadurch sparen Sie viel Zeit beim späteren Debuggen, da Sie beim Schreiben Ihres Codes weniger wahrscheinlich auf das falsche Element verweisen. Laut FreeCodeCamp ist es ein guter Ansatz, sich an die Standardformatierung für CSS-Namen zu halten, dh font-weight vs fontWeight .

Verwenden Sie die BEM-Namenskonvention

Eine gute Möglichkeit, Namen konsistent zu halten, ist die Verwendung der BEM-Namenskonvention. Der Sinn von BEM besteht darin, die Benutzeroberfläche in Komponenten aufzuteilen, die Sie immer wieder verwenden können.

BEM steht für Block, Element und Modifikator. Aber lassen Sie uns aufschlüsseln, was das eigentlich bedeutet.

• Block : Ein Block kann ein beliebiger Teil des Designs auf Ihrer Website sein, z. B. ein Menü, eine Kopfzeile, eine Fußzeile oder eine Spalte. Ihre Blöcke sollten Namen wie .main-nav oder .footer haben.
• Element . Elemente beschreiben die Teile, aus denen jeder Block besteht. Denken Sie an Dinge wie Schriftarten, Farben, Schaltflächen, Listen oder Links. Bei Verwendung der BEM-Namenskonvention werden Elemente durch zwei Unterstriche vor dem Elementnamen identifiziert. Wenn wir also über die Schriftart sprechen wollten, die im Header Ihrer Website verwendet wird, würde sie in CSS mit der BEM-Namenskonvention so aussehen: .header__font
• Modifikator . Das letzte Stück des BEM-Puzzles ist der Modifikator. Mit Modifikatoren legen Sie den Stil des Elements innerhalb des Blocks fest. Dazu gehören Dinge wie Schriftartnamen, Gewichte und Größen; Farbwerte; und Ausrichtungswerte. Wenn Sie mit dem oben erstellten Beispiel weiterarbeiten und die Schriftfarbe innerhalb der Kopfzeile festlegen möchten, schreiben Sie dies so, wobei das Element und der Modifikator durch zwei Bindestriche getrennt sind: .header__font–red

Das Befolgen dieser Namenskonvention – oder einer anderen Entscheidung Ihres Teams – kann später zu einem viel angenehmeren Bearbeitungs- und Debugging-Erlebnis führen.

12. Vermeiden Sie das !Important-Tag

Eine weitere bewährte Methode, die Sie in Ihre CSS-Arbeitsroutine implementieren sollten, besteht darin, eine übermäßige Verwendung des !important -Tags so weit wie möglich zu vermeiden.

Obwohl es Probleme beheben kann, führt seine Verwendung oft dazu, dass man sich darauf als Krücke verlässt. Und das kann zu einem Durcheinander von !important -Tags in Ihrem gesamten Code führen, die schließlich Ihre Website beschädigen können.

Worauf es dabei eigentlich ankommt, ist Spezifität. Wenn ein Selektor sehr spezifisch ist, wird Ihr Webbrowser feststellen, dass er wichtiger ist als bei weniger spezifischen Selektoren. Das !important-Tag kann verwendet werden, um Eigenschaften zu identifizieren, die wichtiger als andere sind.

Dies kann schwierig werden, da Sie häufig mehrere !important-Tags verwenden müssen, von denen jedes in bestimmten Szenarien ein vorheriges überschreibt. Und wenn Sie dies zu oft tun, kann dies dazu führen, dass Ihre Website kaputt geht oder Ihre Stile falsch geladen werden. Meistens wird dieses Tag als kurzfristige Lösung verwendet, aber es wird oft dauerhaft und kann dann später Probleme verursachen, insbesondere wenn es Zeit zum Debuggen ist.

Eine der wenigen Situationen, in denen die Verwendung des !important-Tags als allgemein akzeptabel angesehen wird, besteht darin, dem Endbenutzer zu ermöglichen, Stile für die Verwendung mit Screenreadern und anderen Barrierefreiheitshilfen zu überschreiben. Es ist auch nützlich, wenn es um Utility-Klassen geht.

13. Verwenden Sie Flexbox

Sie könnten auch mehr Nutzen aus Flexbox ziehen, wenn Sie versuchen, Best Practices für den Umgang mit CSS in Ihren Workflow zu implementieren. Flexbox ist eine flexible Möglichkeit, ein Weblayout zu erstellen und Elemente auf der Seite auszurichten, anstatt die herkömmliche Float-Option zu verwenden.

Laut CSS-Tricks ist Flexbox ein flexibles Box-Modul, das eine alternative Möglichkeit darstellt, Ihr CSS zu strukturieren, indem Sie darauf achten, wie Ihre Layouts innerhalb eines Containers ausgerichtet und verteilt sind. Das Beste daran ist, dass die Größe des Behälters selbst nicht einmal bekannt sein muss, sondern die enthaltenen Eigenschaften „flexen“ mit der sich ändernden Behältergröße. Dies ist eine großartige Möglichkeit, mobile Geräte unterzubringen.

Ein weiterer wichtiger Unterschied besteht darin, dass die Flexbox „richtungsunabhängig“ ist, was bedeutet, dass ihre Layouts weder vertikal noch horizontal strukturiert sind. Dies macht es zu einer besseren Wahl für das Entwerfen komplizierter Websites und Anwendungen, die viele Änderungen der Bildschirmausrichtung berücksichtigen müssen. Standard-CSS-Layouts sind blockbasiert und Flexbox-Layouts basieren auf „Flex-Flow“. Auch hier bietet CSS-Tricks eine prägnante Zeichnung, die dieses Konzept gut veranschaulicht:

Elemente innerhalb der Flexbox sind über die Hauptachse und die Querachse angeordnet , wobei jedes Element und jede Eigenschaft darin so gestaltet ist, dass sie sich basierend auf der Größe des Flex-Containers biegen und fließen lassen.

14. WordPress-Tipp: Theme-Dateien nicht direkt ändern

Die letzte der besten CSS-Praktiken, die wir heute hier diskutieren werden, ist speziell für WordPress-Benutzer. Es ist nie eine gute Idee, die Dateien Ihres Designs direkt zu ändern. Jedes Website-Update könnte diese Änderungen zunichte machen oder Ihre Website beschädigen. Es ist das Risiko nicht wert.

Stattdessen können Sie die Option „ Zusätzliches CSS “ im Design-Anpasser verwenden, um alle gewünschten Änderungen vorzunehmen. Sie sollten jedoch bedenken, dass dies das CSS inline einfügt und es direkt im Kopf platziert.

Wenn Sie nur ein oder zwei Änderungen vornehmen möchten, kann dies eine praktikable Option sein, aber alles, was Sie in das Feld „ Zusätzliches CSS “ einfügen, bleibt bestehen, selbst wenn Sie ein Design-Update oder ein Website-Update durchführen oder sogar das Design ändern .

Wenn robustere CSS-Änderungen erforderlich sind, ist es besser, diese aus einem benutzerdefinierten CSS-Stylesheet hinzuzufügen oder ein untergeordnetes Design zu verwenden, bei dem Sie die style.css -Datei für das untergeordnete Design direkt ändern. Auch diese Methode ist updatesicher.

Zusammenfassung

Hals über Kopf in die Erstellung nützlichen und genauen CSS einzutauchen, mag sich für einen echten Neuling nach viel anfühlen, aber wenn Sie sich die Zeit nehmen, sich über Best Practices zu informieren, können Sie später viel Zeit, Mühe und Kopfschmerzen sparen.

Wir hoffen, dass diese Sammlung von Best Practices Ihnen helfen wird, in den kommenden Jahren auf dem richtigen Weg zum Erstellen funktionaler, nützlicher und barrierefreier Websites zu sein. Viel Glück!