.
Arrangieren:
Es ist am besten, Klassen zu verwenden und Selektoren so einfach wie möglich zu halten. So können Sie den obigen Selektor vereinfachen:
.nav a {
color: blue;
}
Dieser Selektor funktioniert genauso wie der vorherige, ist jedoch viel einfacher. Wählen Sie ein beliebiges Element aus das ist ein Nachkomme eines Elements mit der Klasse „nav“.
Durch die Vereinfachung Ihrer Selektoren ist Ihr CSS einfacher zu lesen und zu warten. Es verringert auch die Wahrscheinlichkeit von Spezifitätskonflikten, bei denen spezifischere Selektoren weniger spezifische Selektoren überschreiben.
Bedenken Sie jedoch, dass die Vereinfachung Ihrer Selektoren auch die Wahrscheinlichkeit von Namenskonflikten erhöhen kann, wenn zwei Elemente denselben Klassennamen haben, aber unterschiedliche Stile haben sollten. Um dies zu vermeiden, können Sie Methoden wie BEM (Block, Element, Modifier) verwenden, um Ihre Klassen so zu benennen, dass die Wahrscheinlichkeit von Konflikten verringert wird.
6. Ihr CSS wird nicht organisiert
Wenn Ihr CSS nicht organisiert ist, kann es schwierig sein, Stile zu finden und zu ändern. Dies kann zu Schwierigkeiten bei der Codepflege führen, insbesondere bei der Arbeit mit großen Stylesheets oder in einer Teamumgebung.
Beispiel:
Nehmen wir an, Sie haben eine CSS-Datei mit Hunderten von Codezeilen und alle Stile sind gemischt:
h1 {
color: blue;
}
.footer {
background: black;
}
h2 {
color: green;
}
.header {
background: white;
}
In diesem Beispiel sind die Stile für verschiedene Abschnitte der Website über die CSS-Datei verteilt. Dies kann es schwierig machen, Stile für einen bestimmten Abschnitt zu finden, wenn Sie diese aktualisieren müssen.
Arrangieren:
Eine gute Vorgehensweise besteht darin, Ihr CSS logisch zu organisieren. So können Sie das obige CSS organisieren:
/* Header */
.header {
background: white;
}
h1 {
color: blue;
}
h2 {
color: green;
}
/* Footer */
.footer {
background: black;
}
In diesem Beispiel werden die Stile nach dem Abschnitt der Website gruppiert, für den sie gelten. Dies erleichtert das Auffinden und Aktualisieren von Stilen für einen bestimmten Abschnitt.
Es gibt viele Möglichkeiten, Ihr CSS zu organisieren, und die beste Methode hängt von den Besonderheiten Ihres Projekts ab. Einige Entwickler bevorzugen es, ihr CSS nach Komponenten zu organisieren, andere ziehen es vor, es nach Seiten zu organisieren, und wieder andere ziehen es vor, es nach Stiltyp (Typografie, Layout, Farbe usw.) zu organisieren.
Neben der Organisation Ihres CSS innerhalb jeder Datei ist es auch eine gute Idee, Ihre eigenen CSS-Dateien zu organisieren. Bei großen Projekten kann es nützlich sein, Ihr CSS in mehrere Dateien aufzuteilen (z. B. eine für Typografie, eine für das Layout, eine für Farben usw.) und sie dann alle mithilfe von @import-Anweisungen in ein Haupt-Stylesheet zu importieren. Dies kann die Verwaltung und Wartung Ihres CSS erleichtern.
7. Verwenden Sie keine CSS-Variablen
Mit CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, können Sie bestimmte Werte speichern, um sie im gesamten CSS wiederzuverwenden. Wenn Sie sie nicht verwenden, wiederholen Sie möglicherweise immer wieder dieselben Werte, was die Wartung und Aktualisierung Ihres CSS erschweren kann.
Beispiel:
Nehmen wir an, Sie haben einen bestimmten Blauton, den Sie häufig in Ihrem CSS verwenden:
.header {
background-color: #007BFF;
}
.button {
background-color: #007BFF;
}
.link {
color: #007BFF;
}
In diesem Beispiel wird derselbe Farbwert dreimal wiederholt. Wenn Sie sich entscheiden, diese Farbe zu ändern, müssen Sie jede Instanz davon in Ihrem CSS suchen und aktualisieren.
Arrangieren:
Sie können eine CSS-Variable verwenden, um diesen Farbwert zu speichern:
:root {
--main-color: #007BFF;
}
.header {
background-color: var(--main-color);
}
.button {
background-color: var(--main-color);
}
.link {
color: var(--main-color);
}
In diesem Beispiel wird der Farbwert in einer Variablen namens –main-color gespeichert und diese Variable wird überall dort verwendet, wo die Farbe benötigt wird. Wenn Sie sich entscheiden, diese Farbe zu ändern, müssen Sie nur die Variable aktualisieren und die Änderung wird überall dort angewendet, wo die Variable verwendet wird.
CSS-Variablen können die Pflege und Aktualisierung Ihres CSS erleichtern. Sie können auch dazu beitragen, die Konsistenz Ihrer Stile sicherzustellen. Beachten Sie jedoch, dass CSS-Variablen in einigen älteren Browsern nicht unterstützt werden. Wenn Sie also diesen Browser unterstützen müssen, müssen Sie möglicherweise einen Fallback bereitstellen oder einen Präprozessor wie Sass oder Less verwenden, die über eigene Systeme für Variablen verfügen.
8. Ohne Berücksichtigung der Barrierefreiheit
Barrierefreiheit im Webdesign bedeutet, Ihre Website für alle Menschen nutzbar zu machen, unabhängig von ihren Fähigkeiten oder Behinderungen. Dazu gehören Menschen mit Seh-, Hör-, kognitiven und motorischen Behinderungen. Wenn Sie die Barrierefreiheit in Ihrem CSS nicht berücksichtigen, schließen Sie möglicherweise einen wichtigen Teil Ihrer Zielgruppe aus.
Beispiel:
Nehmen wir an, Sie haben eine Website mit hellgrauem Text auf weißem Hintergrund:
body {
color: #999;
background-color: #fff;
}
Das sieht vielleicht schick aus, ist aber für Menschen mit Sehbehinderung oder Farbsehbehinderung schwer zu lesen.
Arrangieren:
Um Ihre Website zugänglicher zu machen, können Sie kontrastreiche Farben für Text und Hintergrund verwenden:
body {
color: #333;
background-color: #fff;
}
Dies ist auch für Menschen mit Sehproblemen viel einfacher zu lesen.
Neben dem Farbkontrast gibt es in Ihrem CSS noch viele weitere Aspekte der Barrierefreiheit zu berücksichtigen. Hier sind einige Beispiele:
- Verwenden Sie relative Einheiten wie em und rem für Schriftgrößen, damit Benutzer die Textgröße bei Bedarf anpassen können.
- Vermeiden Sie die Verwendung von CSS zum Ausblenden von Inhalten, die für Screenreader zugänglich sein sollen. Verwenden Sie beispielsweise „visibility:hidden“ oder „opacity:0“ anstelle von „show:none“.
- Verwenden Sie Medienabfragen, um Ihr Design responsiv zu gestalten, sodass es auf allen Bildschirmgrößen verwendet werden kann.
- Verwenden Sie bei Bedarf ARIA-Rollen und -Eigenschaften, um unterstützenden Technologien zusätzliche Informationen bereitzustellen.
Denken Sie daran, dass Barrierefreiheit nicht nur eine nette Funktion ist, sondern eine Voraussetzung für gutes Webdesign. Durch die Barrierefreiheit Ihrer Website kann die Benutzerfreundlichkeit für alle Benutzer verbessert werden, nicht nur für Benutzer mit Behinderungen.
9. Testen Sie nicht browserübergreifend
Ihre Website kann in verschiedenen Browsern unterschiedlich aussehen und sich unterschiedlich verhalten, da sie CSS unterschiedlich interpretieren und rendern. Wenn Sie Ihre Website nicht in allen gängigen Browsern testen, sind Ihnen diese Unterschiede möglicherweise nicht bewusst, was zu einer schlechten Benutzererfahrung für einige Ihrer Besucher führt.
Beispiel:
Angenommen, Sie haben in Ihrem Website-Design ein CSS-Rasterlayout verwendet:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Während CSS Grid in allen modernen Browsern unterstützt wird, wird es möglicherweise nicht vollständig unterstützt oder verhält sich in älteren Versionen einiger Browser anders.
Arrangieren:
Um sicherzustellen, dass Ihre Website in allen gängigen Browsern korrekt aussieht und funktioniert, sollten Sie sie in jedem dieser Browser testen. Dazu gehören Chrome, Firefox, Safari und Edge. Es stehen auch Tools zur Verfügung, die Sie bei browserübergreifenden Tests unterstützen können, z Browser-Stack Und Bitleiste.
Wenn Sie feststellen, dass eine bestimmte CSS-Funktion nicht unterstützt wird oder sich in einem bestimmten Browser anders verhält, können Sie Funktionsabfragen (@supports Rule) verwenden, um eine Alternative bereitzustellen:
.container {
display: flex;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
In diesem Beispiel verwendet der Container standardmäßig das flexible Layout. Wenn der Browser CSS Grid unterstützt (wie durch die @supports-Regel festgelegt), verwendet er stattdessen das Grid-Layout.
Das Ziel von browserübergreifenden Tests besteht nicht darin, dass Ihre Website in allen Browsern genau gleich aussieht, sondern darin, allen Benutzern ein konsistentes und nutzbares Erlebnis zu bieten.
10. Kein responsives Design verwenden
Angesichts der heutigen Vielfalt an Geräten und Bildschirmgrößen ist es wichtig, dass Ihre Website responsive ist. Das bedeutet, dass sich Ihr Website-Design an die Bildschirmgröße des Geräts anpassen muss, auf dem es angezeigt wird. Wenn Sie kein responsives Design verwenden, kann die Nutzung Ihrer Website auf manchen Geräten, insbesondere auf Mobilgeräten, schwierig sein.
Beispiel:
Nehmen wir an, Sie haben eine Website mit einer festen Breite:
.container {
width: 1200px;
}
Diese Website sieht auf Bildschirmen mit einer Breite von 1200 Pixeln oder mehr gut aus, auf kleineren Bildschirmen führt sie jedoch zu horizontalem Scrollen, was im Allgemeinen als schlechte Benutzererfahrung angesehen wird.
Arrangieren:
Um Ihre Website responsiv zu gestalten, können Sie Medienabfragen verwenden, um unterschiedliche Stile für unterschiedliche Bildschirmgrößen anzuwenden. So können Sie das obige Beispiel responsiv machen:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
In diesem Beispiel nimmt der Container auf kleineren Bildschirmen 100 % der Bildschirmbreite ein und wird auf größeren Bildschirmen mit einer maximalen Breite von 1200 Pixeln zentriert.
Sie können Medienabfragen auch verwenden, um völlig unterschiedliche Stile für unterschiedliche Bildschirmgrößen anzuwenden. Zum Beispiel:
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
margin: 0 auto;
}
}
In diesem Beispiel hat der Container auf Bildschirmen mit weniger als 768 Pixel die volle Breite, auf Bildschirmen zwischen 768 Pixel und 1199 Pixel eine Breite von 750 Pixel und auf Bildschirmen mit einer Größe von 1200 Pixel oder mehr eine Breite von 1170 Pixel.
Durch die Verwendung von Responsive Design können Sie Ihre Website benutzerfreundlicher und für ein breiteres Publikum zugänglich machen. Es ist ein entscheidender Aspekt des modernen Webdesigns.
