CSS-Duplikate in VS Code finden

Warum dieses Tutorial?

Kennst du das? Wenn CSS-Dateien wachsen - z. B. durch mehrere Navigation-, Footer- oder Sidebar-Demos - schleichen sich fast automatisch doppelte Regeln ein. VS Code bringt dafür überraschend viele Bordmittel mit.

Ein hilfreicher Grundsatz beim Aufräumen: Jede Zeile Code sollte einen Zweck erfüllen. Was nichts mehr beiträgt, darf - nach kurzer Prüfung - auch gehen.

Dieses Tutorial zeigt dir praxisnah und ohne Zusatz-Tools:

wie du zwei CSS-Dateien miteinander mit VS Code vergleichst (Diff-Ansicht)
wie du Duplikate innerhalb einer einzelnen Datei erkennst
welche Workflows sich besonders fürs Refactoring eignen (ohne Build-Tools)

Bedenke

Nicht jedes Duplikat ist ein Fehler - aber jedes unerkannte Duplikat führt vielleicht früher oder später zu einem Fehler.

Begriffe kurz erklärt

Vergleich: Allgemeiner Begriff dafür, zwei Code-Stände gegenüberzustellen, um Gemeinsamkeiten und Unterschiede zu erkennen.
Diff: Die konkrete Ansicht in VS Code, die Unterschiede zwischen zwei Dateien oder Textständen zeilenweise darstellt.
Block-Vergleich: Ein gezielter Vergleich ausgewählter Codeabschnitte, z. B. einzelner CSS-Blöcke, unabhängig von der restlichen Datei.

Im weiteren Verlauf des Tutorials werden diese Begriffe entsprechend verwendet.

Wann lohnt sich ein Vergleich?

Typische Szenarien

alte und neue Styles existieren parallel
ähnliche Komponenten (Nav, Footer, Sidebar) wurden unabhängig entwickelt
oder in meinem Fall: mehrere Demo-Styles sollen in eine CSS-Datei

Wenn du dich dabei öfter fragst: Moment… das habe ich doch schon irgendwo definiert? Dann ist es Zeit für einen Vergleich.

Zwei CSS-Dateien miteinander vergleichen (Diff)

VS Code hat dafür bereits alles eingebaut - keine Extension nötig.

Vorgehen

Öffne beide CSS-Dateien
Rechtsklick auf Datei A → Select for Compare
Rechtsklick auf Datei B → Compare with Selected

VS Code öffnet eine Diff-Ansicht:

links: ursprüngliche Datei
rechts: Vergleichsdatei
Unterschiede sind farblich markiert

Identische Codezeilen bleiben unmarkiert - ideal, um Duplikate sofort zu erkennen.

Alternative: Compare über die Command Palette

Cmd + Shift + P / Strg + Shift + P
Compare Active File With…
zweite CSS-Datei auswählen

Funktioniert identisch, nur ohne Kontextmenü.

CSS-Blöcke gezielt vergleichen (Partial Diff)

Gerade bei Navigationen oder Komponenten ist es oft sinnvoller, nur bestimmte Blöcke zu vergleichen.

Mit der Extension „Partial Diff“

Workflow

Markiere einen CSS-Block, z. B. komplette Navigation
Rechtsklick → Compare Selected Text
Markiere einen zweiten Block
Rechtsklick → Compare Selected Text

Ergebnis

Block vs. Block
identische Properties fallen sofort auf
Unterschiede sind klar isoliert

Perfekt für

nav, .nav ul, .nav a etc.
identische Properties fallen sofort auf
Unterschiede sind klar isoliert

Hinweis: Diese Methode nutzt die VS-Code-Extension Partial Diff. Ohne diese Extension steht der Menüpunkt Compare Selected Text nicht zur Verfügung.

Duplikate innerhalb einer einzigen CSS-Datei finden

Jetzt zum spannenden Teil - besonders relevant, wenn ähnliche oder wiederkehrende Styles innerhalb einer Datei zusammengeführt werden sollen.

Variante A: Datei mit sich selbst vergleichen (Hidden Trick)

Ja, das geht wirklich.

Öffne die CSS-Datei
Rechtsklick im VSC Explorer → Select for Compare
Rechtsklick auf dieselbe Datei → Compare with Selected

VS Code öffnet eine Diff-Ansicht derselben Datei.

gleiche oder sehr ähnliche Blöcke lassen sich visuell vergleichen
besonders hilfreich bei langen Stylesheets, wenn die Snippets weit auseinander liegen

Variante B: Block-vs.-Block innerhalb der Datei (empfohlen)

Mit Partial Diff kannst du auch innerhalb derselben Datei arbeiten:

Markiere einen zusammenhängenden CSS-Block (inkl. Selektor und Properties)
Rechtsklick → Compare Selected Text
Markiere einen zweiten CSS-Block
Rechtsklick → Compare Selected Text

Kommentare können zur Orientierung dienen, verglichen wird jedoch immer der tatsächlich markierte Code.

So erkennst du schnell:

identische Regeln → zusammenführen oder entfernen
abweichende Regeln → gezielt getrennt beibehalten

Warum das sinnvoll ist: Partial Diff eignet sich besonders, um ähnliche CSS-Blöcke direkt miteinander zu vergleichen, ohne komplette Dateien öffnen oder durchsuchen zu müssen.

Variante C: Muster-Suche nach typischen Properties

Oft wiederholen sich in CSS immer dieselben Zeilen:

display: flex;
align-items: center;
list-style: none;

padding: 0;
gap:

Mit Cmd + Shift + F / Strg + Shift + F und Scope auf **nur diese Datei** siehst du sofort:

wie oft etwas vorkommt
wo sich Auslagerungen lohnen

Variante D: Alle gleichen Stellen markieren

Sehr nützlich beim manuellen Refactoring:

Cursor auf eine Property setzen, z. B. list-style
Cmd + Shift + L / Strg + Shift + L
Alle Vorkommen werden markiert

Jetzt kannst du bewusst entscheiden:

rausziehen in z. B. .nav-base
oder bewusst getrennt lassen

Wann Duplikate bewusst beibehalten?

Nicht jeder doppelte Code sollte zusammengeführt werden. Manchmal ist Separation sinnvoller:

Zusammenführen sinnvoll bei:

Identische Reset-Styles (list-style: none, margin: 0)
Wiederholte Layout-Patterns (Flexbox-Container)
Gemeinsame Basis-Styles für ähnliche Komponenten

Getrennt lassen bei:

Komponenten, die sich unabhängig entwickeln sollen
Demo-Styles, die später wieder entfernt werden
Varianten, die bewusst unterschiedlich bleiben

Faustregel

Wenn du eine Änderung an beiden Stellen gleichzeitig vornehmen müsstest, ist das ein Zeichen für sinnvolles Zusammenführen. Wenn die Stellen sich unabhängig voneinander entwickeln können, lass sie getrennt.

Temporärer Kommentar-Workflow (Refactor-Hilfe)

Gerade bei größeren oder gewachsenen Stylesheets bewährt:

CSS

/* === NAV DEMO 1 === */
/* shared? */

nav.demo-1 ul {
  list-style: none;
  padding: 0;
}

/* === NAV DEMO 2 === */
/* shared? */

nav.demo-2 ul {
  list-style: none;
  padding: 0;
}

Danach Schritt für Schritt:

Gemeinsamkeiten markieren
auslagern / kombinieren / löschen
Kommentare wieder entfernen

Praktisches Beispiel: CSS-Blöcke zusammenführen

Hier ein konkretes Vorher-Nachher-Beispiel:

Vorher: Doppelter Code

CSS

/* Demo 1 Navigation */
nav.demo-1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

/* Demo 2 Navigation */
nav.demo-2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem; /* einziger Unterschied */
}

Nachher: Refactored

CSS

/* Gemeinsame Basis für alle Demo-Navigationen */
nav[class^="demo-"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

/* Individuelle Anpassungen */
nav.demo-1 ul { gap: 1rem; }
nav.demo-2 ul { gap: 1.5rem; }

Ergebnis: 5 Zeilen statt 14 – und Änderungen an der Basis wirken automatisch überall.

Extensions für größere CSS-Projekte

Optional - vor allem bei sehr großen Dateien:

Duplicate Code Finder
CodeMetrics

Hinweis

Diese Extensions arbeiten meist zeilenbasiert, nicht semantisch. Für CSS okay, aber kein Ersatz für manuelles Refactoring.

Checkliste: Built-in vs. Extension

Direkt in VS Code enthalten

Dateien vergleichen (Select for Compare)
Diff-Ansicht mit farblich markierten Unterschieden
Suche innerhalb einer Datei Cmd/Strg + F
Projektweite Suche Cmd/Strg + Shift + F
Alle gleichen Vorkommen markieren
Cmd/Strg + Shift + L

Benötigt eine Extension

Block-vs.-Block-Vergleiche
Compare Selected Text (Partial Diff)
Erkennung ähnlicher Codeblöcke
automatische Duplikat-Reports

Merke

VS Code kann ganze Dateien von Haus aus vergleichen (Diff-Ansicht). Für gezielte Vergleiche einzelner Codeblöcke ist eine Extension wie Partial Diff erforderlich.

Zusammenfassung

VS Code kann CSS-Dateien direkt vergleichen
Diff-Ansichten zeigen Unterschiede zuverlässig
Identische Zeilen bleiben bewusst unmarkiert

Duplikate lassen sich auch innerhalb einer Datei finden
Gezielte Suche ersetzt oft komplexe Tools
Extensions ergänzen, ersetzen aber kein Refactoring-Denken

Gerade bei wachsenden Stylesheets ist ein bewusster Vergleich oft effektiver als automatisches Aufräumen.

CSS-Duplikate finden & vergleichen in VS Code