So linten Sie Ihr CSS mit Stylelint

May 4, 2026 · 4 min read

Unsauberes CSS lässt sich leicht schreiben, aber schwer warten. Falsch geschriebene Eigenschaften, doppelte Selektoren und uneinheitliche Konventionen rutschen durch Code-Reviews und sammeln sich zu technischen Schulden an. Stylelint löst dieses Problem, indem es Fehler erkennt und Standards automatisch durchsetzt – bevor sie in die Produktion gelangen.

Dieser Leitfaden enthält alles, was Sie brauchen, um Stylelint-CSS-Linting noch heute in Ihrem Projekt einzurichten.

Wichtige Erkenntnisse

Stylelint erkennt CSS-Fehler und setzt Konventionen mittels statischer Analyse durch – mit über 100 integrierten Regeln.
Es kümmert sich um Codequalität, nicht um Formatierung, und ergänzt sich daher natürlich mit Prettier, anstatt mit ihm zu konkurrieren.
Die schnellste Einrichtung erfolgt mit npm create stylelint@latest, das eine Konfiguration erstellt und stylelint-config-standard installiert.
Regeln können aktiviert, deaktiviert oder zu Warnungen herabgestuft werden – nützlich bei der Einführung von Stylelint in bestehenden Codebases.
Binden Sie es in ein npm-Skript und Ihre CI-Pipeline ein, damit das Linting auch tatsächlich ausgeführt wird.

Was ist Stylelint und warum gehört es in Ihren Workflow?

Stylelint ist ein CSS-Linter mit über 100 integrierten Regeln, dem Teams bei Google und GitHub vertrauen. Es analysiert Ihre CSS-Dateien statisch und meldet Probleme – ungültige Syntax, unbekannte Eigenschaften, doppelte Selektoren und Konventionsverletzungen – ohne den Code auszuführen.

Eine wichtige Unterscheidung: Stylelint kümmert sich um Codequalität, nicht um Formatierung. Es streitet sich nicht mit Prettier über Abstände oder Semikolons. Die beiden Tools ergänzen sich. Prettier formatiert, während Stylelint Korrektheit und Konsistenz durchsetzt. Verwenden Sie beide.

Stylelint installieren: Zwei Wege zum Einstieg

Stylelint benötigt eine moderne Node.js-Version (Node 20.19.0 oder neuer in aktuellen Releases). Stellen Sie also sicher, dass Ihre Umgebung auf dem neuesten Stand ist.

Option 1: Automatisierte Einrichtung (empfohlen)

Der schnellste Weg, CSS mit Stylelint zu linten, ist der create-Befehl:

npm create stylelint@latest

Dies erstellt eine Konfigurationsdatei und installiert stylelint-config-standard automatisch. Es funktioniert auch mit pnpm, Yarn und Bun:

pnpm create stylelint
bun create stylelint

Option 2: Manuelle Stylelint-Einrichtung

Wenn Sie volle Kontrolle bevorzugen, installieren Sie die Abhängigkeiten selbst:

npm add -D stylelint stylelint-config-standard

Erstellen Sie dann eine Datei stylelint.config.mjs im Stammverzeichnis Ihres Projekts:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"]
};

Die .mjs-Erweiterung verwendet ESM – das moderne Modulformat. Stylelint unterstützt ESM-Konfiguration, was in aktuellen Setups der empfohlene Ansatz ist.

Stylelint auf Ihre CSS-Dateien anwenden

Nach der Installation führen Sie Stylelint über alle CSS-Dateien aus:

npx stylelint "**/*.css"

Bei Verstößen sehen Sie eine Ausgabe wie diese:

src/main.css
  12:3  ✖  Unexpected duplicate selector ".btn"   no-duplicate-selectors
  24:5  ✖  Unknown property "colour"              property-no-unknown

Um automatisch zu beheben, was sich beheben lässt, fügen Sie das Flag --fix hinzu:

npx stylelint "**/*.css" --fix

Nicht jede Regel unterstützt Auto-Fix, aber viele tun es. Das --fix-Flag wendet sichere Korrekturen an, wo möglich, behebt aber nicht jedes Problem.

Stylelint-CSS-Linting-Regeln konfigurieren

stylelint-config-standard ist eine solide Grundlage. Sie können es erweitern und einzelne Regeln in Ihrer Konfiguration überschreiben:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"],
  rules: {
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "selector-id-pattern": null  // disable a rule
  }
};

Regeln akzeptieren true zum Aktivieren, null zum Deaktivieren oder ein Array zum Konfigurieren der Schweregrade:

"color-no-invalid-hex": [true, { severity: "warning" }]

Das ist nützlich, wenn Sie Stylelint in einer bestehenden Codebase einführen – Warnungen ermöglichen es Ihnen, Probleme zu prüfen, ohne Builds sofort zu blockieren.

Lint-Skript zur package.json hinzufügen

Binden Sie Stylelint mit einem npm-Skript in Ihren Workflow ein:

{
  "scripts": {
    "lint:css": "stylelint \"**/*.css\""
  }
}

Führen Sie es mit npm run lint:css aus. Von hier aus können Sie es mit lint-staged und Husky in Ihre CI-Pipeline oder Pre-Commit-Hooks integrieren.

Best Practices für CSS-Linting

Beginnen Sie mit stylelint-config-standard – es spiegelt aktuelle CSS-Best-Practices wider und wird aktiv gepflegt.
Verwenden Sie Warnungen vor Fehlern, wenn Sie Stylelint in Legacy-Code einführen.
Ignorieren Sie generierte Dateien, indem Sie eine .stylelintignore-Datei hinzufügen (ähnlich wie .gitignore).
Kombinieren Sie es mit Prettier – versuchen Sie nicht, Stylelint zur Formatierung zu nutzen.
Führen Sie es in der CI aus – Linting nur auf lokalen Maschinen wird übersprungen.

Fazit

Die Einrichtung von Stylelint dauert etwa fünf Minuten und zahlt sich sofort durch erkannte Fehler und konsistenten Code aus. Installieren Sie es, erweitern Sie stylelint-config-standard, fügen Sie ein Skript hinzu und führen Sie es aus. Das ist die gesamte Einrichtung. Alles andere – benutzerdefinierte Regeln, SCSS-Unterstützung, IDE-Integration – baut auf dieser Grundlage auf.

FAQs

Ja. Stylelint unterstützt SCSS, Less und andere CSS-ähnliche Syntaxen über benutzerdefinierte Syntaxen wie `postcss-scss` oder `postcss-less`. Die Unterstützung für CSS-in-JS hängt von der jeweiligen Bibliothek ab und erfordert das passende Custom-Syntax-Paket, das über die Option `customSyntax` konfiguriert wird.

Ja, sie lösen unterschiedliche Probleme. Prettier formatiert Ihren Code und kümmert sich um Leerzeichen, Zeilenumbrüche und Anführungszeichenstil. Stylelint erkennt Codequalitätsprobleme wie ungültige Eigenschaften, doppelte Selektoren und Konventionsverletzungen. Das moderne Stylelint hat seine stilistischen Regeln gezielt entfernt, um Überschneidungen mit Prettier zu vermeiden, sodass die beiden Tools ohne Konflikte zusammenarbeiten.

Verwenden Sie lint-staged mit Husky. Konfigurieren Sie lint-staged in der package.json so, dass `stylelint --fix` auf gestagten CSS-Dateien ausgeführt wird, und fügen Sie dann einen Husky-Pre-Commit-Hook hinzu, der lint-staged aufruft. Dadurch werden nur Dateien gelintet, die committed werden sollen. So bleibt der Hook auch in großen Repositories schnell, während problematisches CSS nicht in den Main-Branch gelangt.

Ja. VS Code verfügt über eine offizielle Stylelint-Erweiterung, die Probleme während des Tippens hervorhebt und sie beim Speichern beheben kann. WebStorm und andere JetBrains-IDEs bieten integrierte Stylelint-Unterstützung. Andere Editoren verfügen möglicherweise über Community-Integrationen. Die Editor-Integration verkürzt die Feedback-Schleife erheblich gegenüber der manuellen Ausführung der CLI.

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.