Besseres (S)CSS mit Stylelint

Stylelint gehört in dieselbe Workflow-Werkzeugkiste wie das Nutshell Framework, Deployer mit den Deployer Recipes und Cypress. Mit Stylelint kannst du deine SCSS- oder CSS-Dateien auf vorher definierte Standards prüfen lassen. Je nach Einstellung werden sogar automatisch Optimierungen vorgenommen.

Du brauchst ein Beispiel? Hier sind sogar drei:

1. Konsistente Einrückung

Wenn du mit SCSS arbeitest, solltest du zwar die Kind-Selektoren entsprechend einrücken, damit du die Struktur besser erkennst — aber im Gegensatz zu SASS ist das Einrücken nicht notwendig. Das kann dazu führen, dass man es mit den Einrückungen mal nicht so genau nimmt. Stylelint korrigiert die Einrückungen automatisch und verwendet je nach Einstellung konsequent Tabs oder Spaces, statt beides wild zu mischen.

2. inset statt vier Einzelwerten

Um Inhalte absolut zu positionieren und über die komplette Breite und Höhe zu strecken, hat man lange so etwas geschrieben:

.abc {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Stylelint weist darauf hin, dass es schon eine ganze Weile inset: 0; gibt — drei Zeilen gespart.

3. Saubere Farbwerte

Einen RGBA-Wert schreibt man idealerweise mit Leerzeichen nach den Kommata. Trotzdem schleicht sich schnell mal ein rgba(0,0,0,0.25) ein. Stylelint macht daraus automatisch rgba(0, 0, 0, 0.25) — und ergänzt auch die Null vor dem Punkt, falls sie fehlt.

Wer statt rgba() nur noch rgb() mit Alpha-Kanal verwenden möchte, kann ebenfalls festlegen, ob die alte Schreibweise rgb(0, 0, 0, 0.25) oder die moderne Schreibweise rgb(0 0 0 / 0.25) der Standard sein soll.

Warum das wichtig ist

Gerade wenn du im Team an Projekten arbeitest, sollten möglichst alle Beteiligten die gleiche Sprache sprechen. Das „Problem" an CSS ist, dass sehr viel erlaubt ist oder verziehen wird. Mit Stylelint bringst du mehr Ordnung in dein CSS und erhöhst so die Qualität deiner Projekte.

Fertige Basis-Konfiguration

Es dauert erfahrungsgemäß ein wenig, bis man eine passende Basis-Konfiguration erstellt hat. Im Nutshell Starterkit findest du eine fertige .stylelintrc.yml — damit sparst du dir vielleicht die ein oder andere Stunde bei der Einrichtung.