Mit diesem Tool schreibst du automatisch besseres (S)CSS
Moin!
Wie du vielleicht schon mitbekommen hast, beschäftige ich mich momentan wieder intensiver mit der Frage, wie ich meinen Workflow optimieren kann. Dabei habe ich schon von unserem Nutshell Framework, Deployer und unseren Deployer Recipes sowie Cypress berichtet.
Ein weiteres Tool, das ich zurzeit bei 3 Projekten teste, ist Stylelint (weil mein vorheriger Linter nicht mehr weiterentwickelt wurde). 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 3:
1. Wenn du mit SCSS arbeitest, dann solltest du zwar die Kind-Selektoren entsprechend einrücken, damit du die Struktur besser erkennen kannst, 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 diese Einrückungen automatisch und verwendet je nach Einstellung konsequent Tabs oder Spaces (statt es wild zu mischen).
2. Um Inhalte absolut zu positionieren und über die komplette Breite und Höhe zu strecken, habe ich bisher immer folgende Zeilen geschrieben:
.abc {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Dank Stylelint habe ich gelernt, dass es schon eine ganze Weile inset: 0; gibt, sodass ich mir 3 Zeilen sparen kann.
3. Natürlich weiß ich, dass ich einen RGBA-Wert idealerweise mit Leerzeichen nach den Kommata schreiben sollte. Trotzdem sahen meine RGBA-Werte manchmal so aus: rgba(0,0,0,0.25). Dank Stylelint wird daraus dann automatisch rgba(0, 0, 0, 0.25). Würde ich die Null vor dem Punkt vergessen, würde auch diese ergänzt werden.
Und sollte ich mich irgendwann dazu entschließen, statt rgba() nur noch rgb() mit Alpha-Kanal zu verwenden, könnte ich ebenfalls festlegen, ob ich rgb(0, 0, 0, 0.25) (die alte Schreibweise) oder lieber die moderne Schreibweise rgb(0 0 0 / 0.25) als Standard festlegen möchte.
Du fragst dich, warum das wichtig ist?
Gerade wenn du im Team an Projekten arbeitest, dann sollten möglichst alle Teilnehmer die gleiche Sprache sprechen. Das „Problem“ an CSS ist jedoch, dass sehr viel erlaubt ist oder verziehen wird. Mit Stylelinter bringst du mehr Ordnung in CSS und erhöhst so die Qualität deiner Projekte.
Da ich aus eigener Erfahrung weiß, dass es ein wenig dauert, bis man eine passende Basis-Konfiguration erstellt hat, findest du im Nutshell Starterkit meine aktuelle .stylelintrc.yml. Damit sparst du dir vielleicht die ein oder andere Stunde bei der Einrichtung.
Nutzt du Stylelint oder einen anderen Linter? Dann schreib mir von deinen Erfahrungen. Du nutzt noch keinen Linter und möchtest dies ändern? Dann kannst du dich ebenfalls gerne melden.
Viele Grüße,
Dennis