8 CSS Tipps & Tricks, die Du als Webentwickler kennen solltest

CSS gehört zu einer Website wie die Sonne zum Sommer. Dabei gibt es Vieles, was machen Du beachten solltest oder auf eine andere Art und Weise verbessern und optimieren kannst. Ich verrate Dir meine CSS-Tipps & Tricks!

Cascading Style Sheets existieren auf nahezu jeder Website im Internet und gehören zu den Grundlagen des Internets. Jahrelange Entwicklung geben einem immer wieder aufs neue Optimierungspotential für die eigenen Websites und Webanwendungen.

Ich habe Dir dazu hier einige CSS Tipps & Tricks zusammengefasst, um bad-practice und good-practice Vorgehensweisen deutlich zu machen.

Hinweis: Diese CSS Tipps & Tricks sind nur meine persönliche Meinung. Es 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 (Milli-) Sekunden beim Laden der Seite.

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

2. Schlechte Klassennamen

Dieser CSS Tipp 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 Redundant

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 Tipps & Tricks ist dieser wohl der unwichtigste, aber gleichzeitig auch der Tipp, der sich am einfachsten umsetzen 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 – wenn auch nur minimal.

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 und kleiner.

So kann es aussehen:

p {
  font-size: 1.8em;
  }

6. Absolute Positionierung

Ich liebe absolute Positionierung. Sie kann in vielen Fällen (z.B. bei CSS Buttons) wirklich hilfreich sein und ist auch in manchen Fällen unvermeidlich und gut.

Allerdings gibt es (angeblich) 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 Tipps & Tricks. Ü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.

8. Outline

Die CSS Outline wird häufig einfach entfernt, weil es im ersten Moment nicht schön aussieht. Ja, ich habe das eine lange Zeit auch so gemacht. Die Outline erscheint immer dann, wenn ein Element die Eigenschaft focus bekommt.

Allerdings musste ich feststellen, dass die Outline sehr wichtig ist. Wichtig für die Barrierefreiheit im Internet.

Schon mal probiert nur mit der Tabulatortaste in einer Website zu navigieren? Nicht, dann wird es höchste Zeit. Suche Dir am besten eine beliebige Website (vielleicht Deine Eigene) und probiere es aus.

Falls die Outline entfernt wurde, wirst Du sehen, dass es unmöglich ist.

Damit die Outline auch chic aussieht sind hier ein paar CSS Outline Ideen. Und hier bekommst Du noch weitere Informationen, wieso Du die Outline nicht entfernen solltest.

Was lernen wir daraus?

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 Tipps & Tricks nicht immer beherzigen kann, aber jede Änderung ist ein Schritt in die richtige Richtung. 🙂

Du kannst nun direkt versuchen meine CSS Tipps & Tricks anzuwenden, indem Du Deinen eigenen WYSIWYG Editor mit HTML, CSS und JavaScript erstellst.