{"id":882650,"date":"2023-10-22T21:59:13","date_gmt":"2023-10-23T02:59:13","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/10-haufige-css-fehler-die-entwickler-oft-machen\/"},"modified":"2023-10-22T21:59:13","modified_gmt":"2023-10-23T02:59:13","slug":"10-haufige-css-fehler-die-entwickler-oft-machen","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/10-haufige-css-fehler-die-entwickler-oft-machen\/","title":{"rendered":"10 h\u00e4ufige CSS-Fehler, die Entwickler oft machen"},"content":{"rendered":"

.<\/p>\n

Arrangieren:<\/h5>\n

Es ist am besten, Klassen zu verwenden und Selektoren so einfach wie m\u00f6glich zu halten. So k\u00f6nnen Sie den obigen Selektor vereinfachen:<\/p>\n

\r\n.nav a {\r\n    color: blue;\r\n}<\/pre>\n
Dieser Selektor funktioniert genauso wie der vorherige, ist jedoch viel einfacher.  W\u00e4hlen Sie ein beliebiges Element aus  das ist ein Nachkomme eines Elements mit der Klasse \u201enav\u201c.<\/a><\/p>\n
Durch die Vereinfachung Ihrer Selektoren ist Ihr CSS einfacher zu lesen und zu warten.  Es verringert auch die Wahrscheinlichkeit von Spezifit\u00e4tskonflikten, bei denen spezifischere Selektoren weniger spezifische Selektoren \u00fcberschreiben.<\/p>\n
Bedenken Sie jedoch, dass die Vereinfachung Ihrer Selektoren auch die Wahrscheinlichkeit von Namenskonflikten erh\u00f6hen kann, wenn zwei Elemente denselben Klassennamen haben, aber unterschiedliche Stile haben sollten.  Um dies zu vermeiden, k\u00f6nnen Sie Methoden wie BEM (Block, Element, Modifier) \u200b\u200bverwenden, um Ihre Klassen so zu benennen, dass die Wahrscheinlichkeit von Konflikten verringert wird.<\/p>\n
6. Ihr CSS wird nicht organisiert<\/h4>\n
Wenn Ihr CSS nicht organisiert ist, kann es schwierig sein, Stile zu finden und zu \u00e4ndern.  Dies kann zu Schwierigkeiten bei der Codepflege f\u00fchren, insbesondere bei der Arbeit mit gro\u00dfen Stylesheets oder in einer Teamumgebung.<\/p>\n
Beispiel:<\/h5>\n
Nehmen wir an, Sie haben eine CSS-Datei mit Hunderten von Codezeilen und alle Stile sind gemischt:<\/p>\n
\r\nh1 {\r\n    color: blue;\r\n}\r\n\r\n.footer {\r\n    background: black;\r\n}\r\n\r\nh2 {\r\n    color: green;\r\n}\r\n\r\n.header {\r\n    background: white;\r\n}<\/pre>\n
In diesem Beispiel sind die Stile f\u00fcr verschiedene Abschnitte der Website \u00fcber die CSS-Datei verteilt.  Dies kann es schwierig machen, Stile f\u00fcr einen bestimmten Abschnitt zu finden, wenn Sie diese aktualisieren m\u00fcssen.<\/p>\n
Arrangieren:<\/h5>\n
Eine gute Vorgehensweise besteht darin, Ihr CSS logisch zu organisieren.  So k\u00f6nnen Sie das obige CSS organisieren:<\/p>\n
\r\n\/* Header *\/\r\n.header {\r\n    background: white;\r\n}\r\n\r\nh1 {\r\n    color: blue;\r\n}\r\n\r\nh2 {\r\n    color: green;\r\n}\r\n\r\n\/* Footer *\/\r\n.footer {\r\n    background: black;\r\n}<\/pre>\n
In diesem Beispiel werden die Stile nach dem Abschnitt der Website gruppiert, f\u00fcr den sie gelten.  Dies erleichtert das Auffinden und Aktualisieren von Stilen f\u00fcr einen bestimmten Abschnitt.<\/p>\n
Es gibt viele M\u00f6glichkeiten, Ihr CSS zu organisieren, und die beste Methode h\u00e4ngt 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.<\/p>\n
Neben der Organisation Ihres CSS innerhalb jeder Datei ist es auch eine gute Idee, Ihre eigenen CSS-Dateien zu organisieren.  Bei gro\u00dfen Projekten kann es n\u00fctzlich sein, Ihr CSS in mehrere Dateien aufzuteilen (z. B. eine f\u00fcr Typografie, eine f\u00fcr das Layout, eine f\u00fcr 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.<\/p>\n
7. Verwenden Sie keine CSS-Variablen<\/h4>\n
Mit CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, k\u00f6nnen Sie bestimmte Werte speichern, um sie im gesamten CSS wiederzuverwenden.  Wenn Sie sie nicht verwenden, wiederholen Sie m\u00f6glicherweise immer wieder dieselben Werte, was die Wartung und Aktualisierung Ihres CSS erschweren kann.<\/p>\n
Beispiel:<\/h5>\n
Nehmen wir an, Sie haben einen bestimmten Blauton, den Sie h\u00e4ufig in Ihrem CSS verwenden:<\/p>\n
\r\n.header {\r\n    background-color: #007BFF;\r\n}\r\n\r\n.button {\r\n    background-color: #007BFF;\r\n}\r\n\r\n.link {\r\n    color: #007BFF;\r\n}<\/pre>\n
In diesem Beispiel wird derselbe Farbwert dreimal wiederholt.  Wenn Sie sich entscheiden, diese Farbe zu \u00e4ndern, m\u00fcssen Sie jede Instanz davon in Ihrem CSS suchen und aktualisieren.<\/p>\n
Arrangieren:<\/h5>\n
Sie k\u00f6nnen eine CSS-Variable verwenden, um diesen Farbwert zu speichern:<\/p>\n
\r\n:root {\r\n    --main-color: #007BFF;\r\n}\r\n\r\n.header {\r\n    background-color: var(--main-color);\r\n}\r\n\r\n.button {\r\n    background-color: var(--main-color);\r\n}\r\n\r\n.link {\r\n    color: var(--main-color);\r\n}<\/pre>\n
In diesem Beispiel wird der Farbwert in einer Variablen namens \u2013main-color gespeichert und diese Variable wird \u00fcberall dort verwendet, wo die Farbe ben\u00f6tigt wird.  Wenn Sie sich entscheiden, diese Farbe zu \u00e4ndern, m\u00fcssen Sie nur die Variable aktualisieren und die \u00c4nderung wird \u00fcberall dort angewendet, wo die Variable verwendet wird.<\/p>\n
CSS-Variablen k\u00f6nnen die Pflege und Aktualisierung Ihres CSS erleichtern.  Sie k\u00f6nnen auch dazu beitragen, die Konsistenz Ihrer Stile sicherzustellen.  Beachten Sie jedoch, dass CSS-Variablen in einigen \u00e4lteren Browsern nicht unterst\u00fctzt werden. Wenn Sie also diesen Browser unterst\u00fctzen m\u00fcssen, m\u00fcssen Sie m\u00f6glicherweise einen Fallback bereitstellen oder einen Pr\u00e4prozessor wie Sass oder Less verwenden, die \u00fcber eigene Systeme f\u00fcr Variablen verf\u00fcgen.<\/p>\n
8. Ohne Ber\u00fccksichtigung der Barrierefreiheit<\/h4>\n
Barrierefreiheit im Webdesign bedeutet, Ihre Website f\u00fcr alle Menschen nutzbar zu machen, unabh\u00e4ngig von ihren F\u00e4higkeiten oder Behinderungen.  Dazu geh\u00f6ren Menschen mit Seh-, H\u00f6r-, kognitiven und motorischen Behinderungen.  Wenn Sie die Barrierefreiheit in Ihrem CSS nicht ber\u00fccksichtigen, schlie\u00dfen Sie m\u00f6glicherweise einen wichtigen Teil Ihrer Zielgruppe aus.<\/p>\n
Beispiel:<\/h5>\n
Nehmen wir an, Sie haben eine Website mit hellgrauem Text auf wei\u00dfem Hintergrund:<\/p>\n
\r\nbody {\r\n    color: #999;\r\n    background-color: #fff;\r\n}<\/pre>\n
Das sieht vielleicht schick aus, ist aber f\u00fcr Menschen mit Sehbehinderung oder Farbsehbehinderung schwer zu lesen.<\/p>\n
Arrangieren:<\/p>\n
Um Ihre Website zug\u00e4nglicher zu machen, k\u00f6nnen Sie kontrastreiche Farben f\u00fcr Text und Hintergrund verwenden:<\/p>\n
\r\nbody {\r\n    color: #333;\r\n    background-color: #fff;\r\n}<\/pre>\n
Dies ist auch f\u00fcr Menschen mit Sehproblemen viel einfacher zu lesen.<\/p>\n
Neben dem Farbkontrast gibt es in Ihrem CSS noch viele weitere Aspekte der Barrierefreiheit zu ber\u00fccksichtigen.  Hier sind einige Beispiele:<\/p>\n