200921Jul

CSS: Schneller Code schreiben mit Texter

Bei Webprojekten ist die Schreibarbeit für CSS-Dateien in der Regel immens: CSS-Stylesheets können schnell über 1000 Zeilen groß werden. Dafür ist die Anzahl der unterschiedlichen Attribute verhältnismäßig gering — es gibt populäre und weniger gebräuchliche Attribute. Meistens werden Elemente mit Größenangaben, Farben, Schrifteinstellungen, Positionen oder Hintergrundbildern versehen. Diese Angaben verteilen sich über das komplette Stylesheet und müssen wiederholt eingegeben werden.
Es gibt verschiedene Möglichkeiten, die Schreibarbeit in Stylesheets zu verringern: Notepad++ bietet eine gute Autovervollständigung, die fertige CSS-Definitionen bereitstellt. Weiterhin gibt es etliche Programme wie TopStyle oder Style Master, die das Erstellen von Stylesheets durch Anklicken der gewünschten Attribute erlauben.
Ich habe mir eine dritte Möglichkeit mit dem Programm Texter von Lifehacker überlegt. Die kleine Windows-Anwendung ersetzt den eingegeben Text durch einen anderen Textbaustein. Die Textersetzung kann direkt oder mithilfe von Trigger-Tasten (Enter, Tab oder Space) durch das Programm vorgenommen werden.

Texter

Ich habe daher ein kleines Paket für Stylesheets erstellt, das 25 allgemeine Attribute beinhaltet, die ich häufig benötige. Als Trigger benutze ich die #-Taste (im direkten Modus). Texter läuft im Hintergrund und funktioniert in jedem Programm. Hier ein kleiner Auszug meines CSS-Bundles:

  • Eingabe: cb# Ausgabe: clear:both;
  • Eingabe: db# Ausgabe: display:block;
  • Eingabe: ff# Ausgabe: font-family:
  • Eingabe: fl# Ausgabe: float:left;
  • Eingabe: pa# Ausgabe: position:absolute;
  • Eingabe: td# Ausgabe: text-decoration:

Natürlich lässt sich das Paket erweitern und anpassen. Diese Methode soll nur ein kleiner Ansatz sein, die Arbeit mit CSS ein wenig zu beschleunigen.