Neulich war ich mit ein paar Frontend-Kollegen essen, und irgendwann kamen wir auf das Thema KI-Codegenerierung. Einer meinte, mit Copilot oder Cursor könne man in wenigen Minuten eine Seitenstruktur runterschreiben, sogar die Logik wird gleich mitgeliefert. Ein anderer stimmte zu: Ja, aber jedes Mal, wenn man CSS von anderen oder von der KI bekommt, bekommt man Kopfschmerzen – die Einrückung ist so chaotisch, als hätte eine Katze daran gekratzt, Leerzeichen sind mal mehr, mal weniger, und manchmal werden hunderte Zeichen in eine Zeile geschrieben, sodass man einen Farbwert mit Strg+F suchen muss.
Das kann ich nur zu gut nachvollziehen. Die KI hat das Tempo beim Codeschreiben zwar deutlich erhöht, aber ausgerechnet beim CSS macht sie oft nur Ärger. Warum? Weil die KI beim Generieren von CSS nur daran denkt, ob es läuft, und überhaupt nicht daran, wie man es später wartet. Wenn man sie bittet, ein responsives Layout zu schreiben, kann sie zwar Media Queries ausgeben, aber Verschachtelung von Selektoren, Reihenfolge der Eigenschaften, Zeilenumbrüche und Einrückung hängen ganz von ihrer momentanen Laune ab. Das Ergebnis: Man kopiert es ins Projekt, und der Code-Stil passt überhaupt nicht zu den Teamrichtlinien, und beim Code-Review wird man von den Kollegen ordentlich kritisiert.
Dann muss man selbst Hand anlegen und das Chaos beseitigen. Ich habe früher auch versucht, manuell nachzubessern, Zeile für Zeile die Einrückung zu korrigieren, überflüssige Leerzeichen zu löschen, komprimierten Code zu entpacken und verstreuten Code zusammenzuführen. Nach einer halben Stunde waren die Augen müde, und dann habe ich aus Versehen einen Eigenschaftswert falsch geändert, und die Seite ist abgestürzt. Später wurde ich klüger und habe direkt Tools verwendet.
CSS-Formatierung und -Komprimierung klingen vielleicht wie ein und dasselbe, gehen aber in zwei Richtungen. Formatieren bedeutet, komprimierten, zusammengequetschten Code wieder zu entpacken, mit vernünftiger Einrückung und Zeilenumbrüchen, damit man ihn lesen kann; Komprimieren ist das Gegenteil: alle löschbaren Leerzeichen, Zeilenumbrüche und Kommentare entfernen, damit die Dateigröße möglichst klein und das Laden schneller wird. Diese beiden Operationen manuell durchzuführen, ist reine Selbstquälerei.
Ich benutze jetzt ein Online-Tool zum Formatieren und Komprimieren von CSS. Man muss keine Software installieren, öffnet die Webseite, fügt den Code ein, klickt auf einen Button, links ist der Originalcode, rechts das Ergebnis. Will man formatieren, wählt man den Formatierungsmodus, und es ordnet den Code automatisch ordentlich an, mit einer Leerzeile zwischen Selektoren, zwei Leerzeichen Einrückung vor Eigenschaften und einem Leerzeichen nach dem Doppelpunkt – das sieht einfach gut aus. Will man komprimieren, wechselt man in den Komprimierungsmodus, es entfernt Kommentare, löscht Zeilenumbrüche, frisst überflüssige Leerzeichen und gibt am Ende eine kompakte Zeile Code aus, die man bedenkenlos in die Produktion werfen kann.
Der Clou ist, dass das Ding nicht wählerisch ist. Code, den man von der KI kopiert hat, egal wie chaotisch, wird ordentlich aufgeräumt. Manchmal ziehe ich CSS aus Open-Source-Projekten von GitHub, die Stile sind völlig unterschiedlich, mal Tabs, mal Leerzeichen, mal ist die Reihenfolge der Eigenschaften durcheinander. Rein damit, einmal durchlaufen lassen, und es kommt ein einheitlicher Stil heraus – das spart einem unendlich viel Arbeit.
Man könnte sagen, der Editor hat doch eingebaute Formatierung. Stimmt, VS Code hat Prettier, WebStorm hat auch etwas eingebaut. Aber das Problem ist, dass nicht jeder seine Umgebung eingerichtet hat. Manchmal ändert man schnell etwas auf dem Computer von jemand anderem oder schreibt Code in einer Online-IDE, dann ist das nicht so praktisch. Außerdem ist die Konfiguration von Prettier manchmal ganz schön fummelig, von Projekt zu Projekt unterschiedlich, und wenn es dumm läuft, gibt es nach dem Formatieren Fehler. Online-Tools haben diesen ganzen Ärger nicht: aufmachen, benutzen, fertig.
Außerdem: Je schneller die KI Code schreibt, desto häufiger bekommen wir Code von anderen. Früher haben an einem Projekt vielleicht nur ein paar Leute geschrieben, jetzt ist die KI mit dabei, und der Code-Stil ist noch unkontrollierbarer. Da ist ein praktisches Formatierungs- und Komprimierungstool wie ein Spülbecken in der Küche: unscheinbar, aber ohne geht es einfach nicht.
Letztendlich ist die KI dafür da, dir bei der Arbeit zu helfen, nicht dafür, dein Zimmer aufzuräumen. Sie kann die Funktionalität schreiben, aber sauberer Code liegt an dir. Statt Zeit mit chaotischem CSS zu verschwenden, such dir lieber ein zuverlässiges Tool, das es in Sekunden erledigt. Die gesparte Zeit kann man für einen Kaffee nutzen oder zwei weitere Komponenten schreiben – ist das nicht schöner?