Entwicklung & Design

CSS Beautifier: Stylesheets automatisch schöner machen

Die Zeit für schönen Code ist nicht immer da. Gut, dass es Tools wie den CSS Beautifier gibt, mit dem Webentwickler CSS-Stylesheets mit nur einem Klick lesbar und konsistent machen können

Der CSS Beautifier sorgt dafür, dass Stylesheets lesbar bleiben bzw. werden und kann „minified Stylesheets“ in ein für Menschen geeignetes Format umformulieren.

Jeder Webworker dürfte es kennen. Der Zeitdruck ist immens, der Kaffee-Vorrat aufgebraucht und die Konzentration läuft auf Sparflamme. Aber das Design muss morgen raus. Die Formatierung der Stylesheets könnte so schon mal zur Nebensache werden. Hinterher wird sowieso alles minified.

Spätestens bei der nächsten Anpassung des Styles ärgert man sich dann, dass man nicht ordentlicher gearbeitet hat. Der CSS Beautifier nimmt euch einen Teil der Arbeit ab und formatiert die unübersichtlichsten CSS-Dokumente in ein gut lesbares Stylesheet um. Hierfür muss der unformatierte CSS-Code in das Tool kopiert oder direkt eingetippt werden.

CSS Beautifier Screenshot

Im unteren Fenster erhaltet ihr die formatierte Ausgabe, für die verschiedene Einrückungs- und Absatz-Optionen zur Verfügung stehen. Außerdem kann das Tool auf Wunsch fehlende Semikolons ergänzen und so leicht zu übersehende Fehler korrigieren.

Das Tool kann in einer optisch ansprechenderen Version von Fireworks Police oder auf der offiziellen Projektseite vom CSS Beautifier getestet werden. Auf GitHub steht der CSS Beautifier außerdem für den Offline Einsatz zur Verfügung.

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
waldi
waldi

Nettes Tool :) ProCSSor kann das auch und hat noch vielfältigere Einstellungsmöglichkeiten.

Antworten
Jakiku

So etwas habe ich gesucht. Habe noch eine CSS mit dem Code in einer Zeile. Ich hasse so etwas wie die Pest.

Antworten
Anon
Anon

Ein CSS-Beautifyer, so etwas vortschrittliches habe ich ja noch nie gesehen! Wenn ihr euren Innovationstrieb gerade nicht bremsen könnt, dann baut doch auch noch einen QR-Code Generator oder einen Bild-zu-Uri-Converter.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.