Working Draft

Hi,

also was das CSS-Zeugs angeht, da finde ich Dirk „YAML“ Jesses Thinkin‘ Tags auch ziemlich interessant. Hab’s aber erst einmal wieder aus den Augen verloren, weil ich lange nichts mehr davon gehört habe.

Was ich aber in Sachen IDE noch viel interessanter fände, wäre eine Verbindung aus der CSS-Ansicht von Firebug/Web Inspector und Zen Coding für CSS. Also eine IDE, in der man nicht Plain-CSS schreibt, aber auch nicht direkt auf einer GUI arbeitet. Konkret könnte das so aussehen, dass man nur einen Selektor oder ein Codekürzel tippt, Tab drückt und sich dann sofort ein Feld für CSS-Eigenschaften öffnet. Allerdings schreibt man diese auch nicht bloß untereinander, sondern eher wie in Firebug, wo man für jede Eigenschaft ein eigenes Feld hat und je nach Key verhält sich das Feld für Value unterschiedlich. Tippt man z.B. color, so öffnet sich ein Feld, in das man den Hey-, RGB-, RGBA- oder HSV-Code eintragen kann. Die Hintergrundfarbe des Feldes (und für bessere Lesbarkeit je nach Kontrast auch die Vordergrundfarbe) ändert sich dann entsprechend, per Pfeiltasten kann man die Zahlenwerte in Einerschritten (oder bei gedrückter Shift-Taste in Zehnerschritten) inkrementieren oder dekrementieren und wer will, kann per Klick auf einen kleinen eingeblendeten Pfeil auch einen Color-Picker hervorholen.

Einzelne Blöcke lassen sich dann auch per Tasten-Kombination oder Drag&Drop verschieben, um die Kaskadierung zu ändern. Hier könnte man beliebig weiterspinnen. Zieht man z.B. einen Block auf einen anderen drauf oder bewegt man ihn unter einen anderen und drückt z.B. Shift+Tab, ändert sich automatisch der Selektor, sodass der Block hierarchisch unterhalb des anderen liegt.

Per Tastenkombinationen kann man dann sehr komfortabel zwischen den Eigenschaften und Selektoren springen. Einzelne Selektorblöcke werden dann auch in einer Hierarchie dargestellt etc.
Das Ganze gestaltet sich dann so, dass man gar keinen Plain-Text mehr vor sich hat, sich also auch gar keine Gedanken mehr über Sortierung der Eigenschaften machen muss und auch so Sachen wie die Frage welche Einrückung man verwendet (Leerzeichen [wenn ja, wie viele?] oder doch Tabs), ob man umgebrochene Zeilen nochmals einrückt (z.B. bei mehreren Hintergründen), wie viele Leerzeichen vor und nach dem Doppelpunkt kommen, ob man die Eigenschafts-Werte alle vertikal ausrichtet, ob man hierarchische Strukturen durch besondere Block-Einrückungen deutlich macht usw. usf. fallen dann alle weg.

Stattdessen wird das alles in einem Regelwerk festgelegt, welches zum Einsatz kommt, wenn die CSS-Datei gespeichert wird. Das macht dann übrigens auch externe CSS-Minifyer relativ überflüssig, da kein Bedarf der Unterscheidung zwischen Arbeits- und Produktiv-CSS mehr besteht (außer vielleicht in Hinblick auf Kommentare). Man kann also direkt minifiziert speichern (oder wenn man Kommentare erhalten will oder nett gegenüber anderen ist, die Plain-CSS schreiben) speichert man für die Produktivumgebung einfach eine Kopie mit entsprechend anderem Formatierungsregelwerk ab.
Wird eine CSS-Datei geöffnet, wird sie unabhängig von ihrer usprünglichen Formatierung direkt in diese Formulare geparst, womit sich auch schlecht formatiertes CSS ohne vorige Beautifier-Durchläufe lesen lässt. Damit diese Formulare teamfähig sind, kann auch festgelegt werden, dass das Formatierungsschema einer Datei für das Abspeichern erhalten bleibt. Hätte auch wieder den Vorteil, dass ich einfach schickes CSS schreiben kann, obwohl die Vorgabe vom Team ist, dass geschweifte Klammern in eine eigene Zeile kommen, mit 8 Leerzeichen, die Eigenschaften mit 16 Leerzeichen eingerückt werden, die Eigenschafts-Werte in eine eigene Zeile kommen und nochmals eingerückt werden und nach jeder Eigenschaft je eine Leerzeile steht. Das könnte dann einfach im Regelwerk festgelegt werden (welches, soweit möglich automatisch anhand der Datei generiert wird, dann aber natürlich händisch überarbeitet werden kann) und ich habe damit nichts mehr am Hut.

Das Ganze könnte sehr flexibel gestaltet werden, die Verwendung von Code-Bausteinen würde extrem einfach, die Navigation innerhalb der CSS sehr effizient. Man könnte z.B. eine Suche nach Selektoren anhand von Selektoren machen etc. pp.

Mag sein, dass Thinkin‘ Tags viel hiervon bietet, aber letztendlich ist es doch mehr klickorientiert, während hier der Fokus eindeutig auf der Tastatur-Bedienung läge. Außerdem wäre das gesamte Ding in die IDE integriert. Also falls mal jemand Lust hat, dafür mal ein Komodo-Add-on zu entwickeln oder so, dann bitte. :-)