Diese 7 CSS No-Gos solltest Du vermeiden!

Diese 7 CSS No-Gos solltest Du vermeiden!

Immer wieder liest man CSS Tipps und was man beachten muss um möglichst schnell fancy Websites zu erstellen. Manchmal hilft es aber auch mal, die schlechten Beispiele zu sehen um zu wissen was wirklich gut ist. Und genau diese CSS No-Gos findest Du hier!

Wichtig: Die folgenden No-Gos sind nur meine persönliche Meinung für „schlechtes“ CSS. Das sind keine festgelegten Regeln, sondern nur Tipps aus meiner eigenen Erfahrung!

1. Style-Resets

Jedes HTML Element hat einige Default Styles, welches das Element einzigartig machen soll. Daraus ergibt sich dann auch das Einsatzgebiet bzw. den Verwendungszweck des Elements. Deshalb sollte man diese Default Styles auch nutzen und nicht resetten. Am Beispiel des p Tags lässt sich das Problem gut erklären.

/* No-Go */

/* Default Style */
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

/* Wrong: Our custom Style */
p {
  display: inline-block;
  margin: 0;
}

Wir würden das Default display und margin Attribut überschreiben. Hier bietet sich eher ein span Element an, da es standardmäßig keine Styles besitzt.

Besser wäre es so:

/* Correct: Our custom Style */
span {
  display: inline-block;
  margin: 0;
}

Natürlich müssen wir bei vielen Elementen Styles anpassen und auch manchmal überschreiben, da sie sonst nicht mit dem CD (Corporate Design) übereinstimmen und jede Seite identisch aussehen würde. Allerdings kann man schon ein wenig darauf achten. Das spart CSS Code und somit wichtige Sekunden beim Laden der Seite.

Hier findest Du eine Liste mit den Default Styles für alle HTML Tags.

2. Unpassende Klassennamen

Dieses No-Go ist sehr wichtig, wenn andere Entwickler den Code anpassen sollen. Ähnlich wie gut gewählte Kommentare sind auch Klassennamen ein wichtiger Schritt für lesbaren Code.

Bei diesem Punkt müssen wir dabei zwischen drei Fehlern unterscheiden.

2.1 Zu kurz – Nichtssagend

Wenn Klassennamen zu kurz gewählt werden, sind diese meist nichtssagend. Was können wir mit f anfangen? Richtig: nichts! Wähle deshalb immer aussagekräftige Klassenname und versuche möglichst viele Helferklassen zu verwenden. So solltest Du es nicht machen:

/* No-Go */

.f {
  color: red;
}
.a {
  margin: 1rem 3rem 2rem 3rem;
}
.cf {
  display: none;
}

So würden aussagekräftige Helferklassen aussehen:

.red-color {
  color: red;
}
.margin-small-big {
  margin: 1rem 3rem 2rem 3rem;
}
.display-none {
  display: none;
}

2.2 Identisch mit HTML Tag

Diese Klassennamen sind zwar verständlich aber vollkommen überflüssig. Wir können HTML Elemente anhand des Elementnamen section oder span schon selektieren und benötigen nicht noch eine zusätzliche Klasse mit dem gleichen Namen. Das Folgende ist ein No-Go:

/* No-Go */

section.section {
  min-height: 80vh;
}
span.span {
  color: red;
  font-size: 12px;
}

So wäre es besser:

section {
  min-height: 80vh;
}
span {
  color: red;
  font-size: 12px;
}

2.3 Verwirrend

Verwirrende Klassennamen sind am schlimmsten. Wenn ich im Code no-margin lese, gehe ich auch davon aus, dass im CSS das Margin auf Null gesetzt wird. Auch bei color-red geht jeder davon aus, dass die Hintergrundfarbe oder Schriftfarbe auf Rot gesetzt wird. So sollte es nicht aussehen:

/* No-Go */

p.color-red {
  color: green;
}
.no-margin {
  margin: 3rem 0.5rem;
}

So könnten Klassennamen aussehen, welche nicht verwirren:

p.color-green {
  color: green;
}
.margin-big-small {
  margin: 3rem 0.5rem;
}

3. Important Schlüsselwort

Wir kennen es doch alle: Ein Style der sich nicht ändern lässt, weil er bereits oft überschrieben wird oder von einem Plugin kommt. Dann benutzen wir gerne das kleine Zauberwort !important in unserem CSS.

Es bewirkt, dass dieser Style immer greift und das Problem ist vermeintlich behoben. Allerdings ist das der Beginn eines Teufelskreises. Wenn Du das nächste Mal etwas daran ändern willst und wieder zu faul zum Suchen bist, verwendest Du wieder das Schlüsselwort und irgendwann gibt es komplettes Chaos.

Deshalb solltest Du immer gut überlegen und suchen, bevor Du das Schlüsselwort einsetzt. Manchmal lässt es sich tatsächlich nicht vermeiden, aber doch häufiger auch anders lösen.

Deshalb unterlasse sowas unbedingt:

/* No-Go */

span.foobar {
  color: red!important;
  margin-top: 4rem!important;
  font-size: 12px!important;
  border-bottom: 1px solid #000!important;
}

4. Leere Selektoren

Von allen CSS No-Gos ist dieses wohl das unwichtigste, aber gleichzeitig auch das No-Go, welches sich am einfachsten vermeiden lässt.

Die Rede ist von leeren Selektoren. Also Selektoren, die keine Attribute beinhalten. Durch diese Selektoren gehen immer ein paar Bytes Speicher verloren.

Wenn das oft im Code vorkommt und wir sehr viele und große CSS Dateien haben, kann sich das auf die Ladezeit Deiner Seite auswirken.

Deshalb hat sowas nichts im CSS verloren:

/* No-Go */

p { }
span { }
.no-margin { }
footer { }
footer > a { }

5. Überschreiben von Styles

Wir haben schon über das Schlüsselwort „!important“ geredet. Damit können wir Styles überschreiben, so dass diese CSS Regel immer greift. Wenn wir das zu häufig einsetzen haben wir bei späteren Änderungen große Probleme. Aber auch ohne das Schlüsselwort sollten wir Überschreiben größtenteils vermeiden.

Das solltest Du vermeiden:

/* No-Go*/

p {
  font-size: 2em;
  color: #FFF;
}

/* ..other code.. */

p {
  font-size: 2.2em;
  line-height: 20px;
}

/* ..other code.. */

p {
  font-size: 1.8em;
}

Diesen Fehler kannst Du aber ganz einfach vermeiden. Anstatt immer einen neuen Style hinzuzufügen, kannst Du einfach für STRG + F nach einem Vorkommen in deinen CSS Dateien suchen und entsprechend abändern.

Dadurch sparen wir uns Code, somit Speicherplatz und die Datei bleibt auch übersichtlicher.

So kann es aussehen:

p {
  font-size: 1.8em;
}

6. Zu viel absolute Positionierung

Ich liebe absolute Positionierung. Sie kann in vielen Fällen wirklich hilfreich sein und ist auch in manchen Fällen unvermeidlich und gut.

Allerdings gibt es tatsächlich noch Leute, die jedes Element absolut positionieren. Es gibt viele Gründe, warum man das unterlassen sollte. Zum einen ist es viel aufwendiger, jedes Element pixelgenau an eine bestimmte Stelle zu positionieren. Viel Schreibarbeit, viel Ausprobieren und unsauber sieht es meist dazu auch noch aus.

Außerdem ist es viel schwieriger eine Seite responsive zu machen und man muss sehr viele Breakpoints einfügen, damit die Seite auf jeder Auflösung gut aussieht. Warum sollte man sich das Leben schwerer machen, als es ist..? Aber wie gesagt: es gibt auch sehr viele gute Einsatzgebiete für absolute Positionierung.

7. Zu viel CSS

Ein Problem was ich z.B. bei vorgefertigten WordPress-Themes sehe. Man hat schon viel CSS-Code (auch viel unnötiger Code dabei) und fügt dann sogar noch seinen eigenen Code hinzu. Damit ist das Chaos dann komplett.

Hier greifen dann wohl viele der aufgelisteten No-Gos. Überschreibungen, leere Selektoren, häufiges Benutzen von „!important“ und vor allem: verwirrend! Deshalb solltest Du direkt allen Code, der nicht benötigt wird oder den Du abänderst direkt entfernen oder umschreiben.

Aber auch bei anderen Projekten solltest du minimalen Code schreiben. Es macht vieles einfacher und Minimalismus ist mittlerweile modern und schön.

Fazit

Es gibt also viele Punkte die Du beachten kannst, um übersichtliches und performantes CSS zu schreiben. Man lernt nun mal nie aus und kann seinen „Code“ immer verbessern. Ich weiß auch, dass man diese CSS No-Gos nicht immer vermeiden kann, aber man kann versuchen sich stets zu verbessern.

Ich würde mich freuen, wenn Du mich durch einen wiederholten Besuch auf meiner Seite unterstützt! 🙂

NEW 🚀
NEW 🚀
NEW 🚀
NEW 🚀

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.