Stylelint Anleitung

Letztes Update: 26.04.2021

In diesem Blogpost erkläre ich euch wie wir stylelint in unseren Webprojekten einrichten und benutzen können.

Was ist Stylelint

Stylelint ist ein mächtiger, moderner Linter, mit dem wir Fehler in unseren Styles vermeiden und eine einheitliche Konventionen in unsere Styles durchsetzen können.

Anfangen

Als Erstes werden wir das Stylelint Paket folgendermaßen installieren:

yarn add --save-dev stylelint

Anschließend erstellen wir eine .stylelintrc Konfigurationsdatei im Stammverzeichnis unseres Projekts, mit dem folgenden Inhalt:

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 2,
        "string-quotes": "single",
        "no-duplicate-selectors": true,
    }
}

Hier erkläre ich euch die oben gesetzten Regeln mit Beispielen:

indentation:
Wir benutzen 2 Leerzeichen als Einrückung

@media print {
  a {
    background-position: top left,
      top right;
  }
}

string-quotes:
Alle Strings werden in einfache Anführungszeichen gesetzt

// Das folgende Beispiel gilt als Verstoß:
a { content: "x"; }

// Das folgende Beispiel gilt nicht als Verstoß:
a { content: 'x'; }

no-duplicate-selectors:
Doppelte Selektoren in einem Stylesheet nicht zulassen

// Das folgende Beispiel gilt als Verstoß:
.foo,
.bar,
.foo {}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {}
@media (min-width: 10px) {
  .foo {}
}

Das Ganze ist nur ein teil von Regeln, die wir mit Stylelint benutzen können. Stylelint bringt über 170 Regeln von Haus aus mit. Wenn wir weitere Regeln kennenlernen wollen, dann können wir auf die Homepage von Stylelint schauen.

Im Skriptabschnitt in unserer package.json fügen wir Folgendes hinzu:

"stylelint": "stylelint \"./src/**/*.css\"",

Der Pfad kann sich je nach Projekt ändern.

Nun können wir stylelint das erste mal starten mit

yarn stylelint

image stylelint-output

Stylelint mit styled components

Auch in Projekten die styled-components benutzen, wie z.Bsp in React Projekten, können wir Stylelint benutzen.

Was brauchen wir dafür:

yarn add stylelint stylelint-processor-styled-components stylelint-config-styled-components stylelint-config-recommended

Wir verwenden nun folgende .stylelintrc Konfigurationsdatei in unserem Projekt.

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

Im Skriptabschnitt in unserer package.json fügen wir Folgendes hinzu:

"stylelint": "stylelint \"./src/**/*.ts{,x}\"",

Was machen die Pakete jetzt ganz genau?

stylelint-processor-styled-components:

Dieser Prozessor wird benötigt, um Styles aus unseren styled-components zu extrahieren. Der Prozessor arbeitet auch mit Dateien vom Typ Flow und TypeScript! (Wir gehen davon aus, dass TypeScript verwendet wird, wenn Ihre Dateien mit .ts oder .tsx enden.)

stylelint-config-styled-components:

Bei der Verwendung von Stylelint-Prozessor-Stil-Komponenten werfen einige Stylelint-Regeln Fehler auf, die Sie nicht verhindern können. Wie 'no-empty-source' oder 'no-missing-end-of-source-newline'.

Diese gemeinsam nutzbare Konfiguration deaktiviert automatisch Regeln, die unlösbare Konflikte verursachen. Neben diesen Regeln werden vom Hersteller vorangestellte Eigenschaften und Werte einen Fehler auslösen, da styled-components automatisch Herstellerpräfixe für Ihr CSS generiert. Wir müssen beachten, dass wir diese Regeln in unserer Stylelint-Konfiguration jederzeit überschreiben können, wenn wir sie ändern möchten.

stylelint-config-recommended:

Die empfohlene gemeinsam nutzbare Konfiguration für Stylelint. Es werden alle möglichen Fehlerregeln in stylelint aktiviert. Ein Liste von aktivierten Regeln finden wir hier.

Wir verwenden es so wie es ist oder wir können es als Grundlage für unsere eigene Konfiguration verwenden.

Stylelint in SASS/SCSS Projekten

Ich persönlich verwende in meinen privaten Projekten SCSS Stylesheets, auch dafür gibt es eine gute Stylelint Erweiterung namens stylelint-config-sass-guidelines. Es bassiert auf den folgenden Styleguide.

Das ganze installieren wir folgendermaßen:

yarn add stylelint-config-sass-guidelines

Und in unserer .stylelintrc fügen wir die Zeile stylelint-config-rationalorderfolgendes ein.

{
  "processors": [...],
  "extends": [
    ...
    /// Wird hier hinzugefügt
    "stylelint-config-sass-guidelines"
  ]
}

Was genau macht die Erweiterung? Das Erkläre ich euch jetzt.

Schlüsselprinzipien

Syntax & Formatierung

Strings

Nummern

Farben

Listen

Maps

Deklarationssortierung

Selektorverschachtelung

Regeln der Namensgebung

Kommentare

Stylelint Erweiterungen

Es gibt noch einige nützliche Stylelint Erweiterungen, die ich gerne hier Vorstellen möchte.

stylelint-config-rational-order

Ist eine Stylelint-Konfiguration, die verwandte Eigenschaftsdeklarationen sortiert, indem sie in der folgenden Reihenfolge gruppiert werden:

  1. Positioning
  2. Box Model
  3. Typography
  4. Visual
  5. Animation
  6. Misc
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  /* Box Model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Typography */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;

  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;

  /* Animation */
  transition: all 1s;

  /* Misc */
  user-select: none;
}

Das hat den Vorteil, gegenüber der alphabetischen Sortierung, dass die verwandten Eigenschaften gleich auf einem ersten Blick erkennt.

Damit das Ganze in unser Stylelint benutzt werden kann, werden wir als erstes folgendermaßen installieren.

yarn add stylelint-order stylelint-config-rational-order

Und in unserer .stylelintrc fügen wir die Zeile stylelint-config-rationalorderfolgendes ein.

{
  "processors": [...],
  "extends": [
    ...
    /// Wird hier hinzugefügt
    "stylelint-config-rational-order"
  ]
}

stylelint-a11y

Diese Stylelint-Konfiguration ist sehr nützlich um barrierefreie CSS-Regeln zu erstellen.

Als erstes installieren wir das Plugin folgendermaßen:

yarn add stylelint-a11y

Unsere .stylelintrc wird um folgendes erweitert:

{
  "processors": [...],
  "plugins": ["stylelint-a11y"], // Diese Zeile wird hinzugefügt
  "extends": [
    ...
  ],
  "rules": {
    // Das sind die neuen Regeln die wir setzen können.
    "a11y/content-property-no-static-value": true,
    "a11y/font-size-is-readable": true,
    "a11y/line-height-is-vertical-rhythmed": true,
    "a11y/media-prefers-reduced-motion": true,
    "a11y/media-prefers-color-scheme": true,
    "a11/no-display-none": true,
    "a11y/no-obsolete-attribute": true,
    "a11y/no-obsolete-element": true,
    "a11y/no-spread-text": true,
    "a11y/no-outline-none": true,
    "a11y/no-text-align-justify": true,
    "a11y/selector-pseudo-class-focus": true
  }
}

Jetzt erkläre euch kurz was für Regeln das sind und was sie bewirken.

content-property-no-static-value:

CSS-generierten Inhalt mit Ausnahme von Aria-Label-Attributinhalten und leeren Zeichenfolgen nicht zulassen.

// Das folgende Beispiel gilt als Verstoß:
.foo::before {
  content: 'Price: $50';
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  content: '';
}

.foo {
  content: attr(aria-label);
}

font-size-is-readable:

Schriftgrößen unter 15px (oder 11,25pt) nicht zulassen.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  font-size: 10px;
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  font-size: 15px;
}

.foo {
  font-size: 1em;
}

line-height-is-vertical-rhythmed:

Vertikaler Rhythmus ist ein Konzept, das aus der Drucktypografie stammt. In Vertical Rhythm versuchen wir, vertikale Abstände zwischen Elementen auf einer Seite konsistent zu halten.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  line-height: 12px;
}

.foo {
  line-height: 1.3;
}

.foo {
  line-height: 50px;
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  line-height: 24px;
}

.foo {
  line-height: 1.6;
}

.foo {
  line-height: 48px;
}

media-prefers-reduced-motion:

In Safari 10.1 wurde die Medienabfrage für reduzierte Bewegungen eingeführt. Es handelt sich um eine Deklaration ohne Herstellerpräfix, mit der Entwickler „Stile erstellen können, die große Bewegungsbereiche für Benutzer vermeiden, die in den Systemeinstellungen eine Präferenz für reduzierte Bewegung angeben“.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  animation: 1s ease-in;
}

.bar {
  animation-name: skew;
}

@media screen and (prefers-reduced-motion) {
  .bar {
    transition: none;
  }
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  line-height: 24px;
}

.foo {
  line-height: 1.6;
}

.foo {
  line-height: 48px;
}

media-prefers-color-scheme:

Die Medienfunktion "Bevorzugtes Farbschema" spiegelt den Wunsch des Benutzers wider, dass die Seite ein helles oder dunkles Farbthema verwendet.

light: Gibt an, dass der Benutzer die Präferenz für eine Seite mit einem hellen Thema (dunkler Text auf hellem Hintergrund) oder keine aktive Präferenz ausgedrückt hat (und daher die "Web-Standardeinstellung" eines hellen Themas erhalten sollte).

dark: Gibt an, dass der Benutzer die Präferenz für eine Seite mit einem dunklen Thema (heller Text auf dunklem Hintergrund) ausgedrückt hat.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  color: red;
}

@media screen and (prefers-color-scheme: dark) {
  .foo {
    background-color: red;
  }
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  color: red;
}

@media screen and (prefers-color-scheme: dark) {
  .foo {
    color: white;
  }
}

no-display-none:

Entwickler verwenden normalerweise display: none, um Inhalte auf der Seite auszublenden. Leider kann diese häufige Aktion für Benutzer von Bildschirmleseprogrammen problematisch sein, insbesondere wenn der verborgene Inhalt für sie bestimmt ist.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  display: none;
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  display: flex;
}

no-obsolete-attribute:

Veraltete Attribute nicht zulassen

// Das folgende Beispiel gilt als Verstoß:
body[link] {
  background-color: pink;
}

a, img[datasrc] {
  color: pink;
}

img[align], a[name] {
  color: pink;
}

no-obsolete-element:

Veraltete Selektoren nicht zulassen.

// Das folgende Beispiel gilt als Verstoß:
blink {
  color: pink;
}

no-spread-text:

Textbreite von mehr als 45 Zeichen und weniger als 80 Zeichen erforderlich. Das erhöht die Lesbarkeit und die Augen ermüden nicht so schnell.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  text-transform: lowercase;
  max-width: 40ch;
}

.foo {
  line-height: 1.8;
  max-width: 82ch;
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  max-width: 65ch;
}

.foo {
  max-width: 82ch;
}

.foo {
  max-width: 100px;
}

no-outline-none:

Das Entfernen von Konturen (outline) in CSS führt zu Problemen für Benutzer, die mit einer Tastatur im Web navigieren.

// Das folgende Beispiel gilt als Verstoß:
.foo:focus {
  outline: 0;
}

.bar:focus {
  outline: none;
}

.baz:focus {
  outline: none;
  border: transparent;
}

.quux {
  .quuux:focus {
    outline: 0;
  }
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  outline: 0;
}

$primary-color: #333;
.bar:focus {
  outline: 1px solid $primary-color;
}

.baz:focus {
  outline: 1px solid #333;
}

.quux:focus {
  outline: 0;
  border: 1px solid #000;
}

no-text-align-justify

Wir verbieten { text-align: justify; }. Wenn der Text als Blocksatz (justify) gesetzt wird, wird es schwerer lesbarer, da große Lücken in den Textblöcken entstehen, die das Lesen unterbrechen und den Textblock ungleichmäßig machen.

// Das folgende Beispiel gilt als Verstoß:
.foo {
  text-align: justify;
}

// Das folgende Beispiel gilt nicht als Verstoß:
.foo {
  text-align: center;
}

.foo {
  text-align: left;
}

.foo {
  text-align: right;
}

.foo {
  text-align: start;
}

.foo {
  text-align: end;
}

selector-pseudo-class-focus:

Überprüft das Vorhandensein einer Pseudoklasse für Selektoren mit :hover.

// Das folgende Beispiel gilt als Verstoß:
a:hover {
}

// Das folgende Beispiel gilt nicht als Verstoß:
a:hover,
a:focus {
}

a:focus {
}

a:hover {
}
a:focus {
}

Stylelint in IDE/Editoren

Für viele IDEs und Editoren gibt es Plugins womit wir Stylelint in diesen ausführen können.

Die eigegebene E-Mail-Adresse wird vorm Speichern unwiderruflich verschlüsselt und dient nur zur Darstellung des Avatars. Mit dem Absenden stimmst du zu, dass die eingegebenen Daten gespeichert und in Form eines Kommentars dargestellt werden dürfen.