(Wie) macht Ihr css-Refactoring?

[Olaf Schneider]

Hallo,

wer kennt es nicht: Das Projekt ist eilig – drei Screens existieren schon und man soll sofort mit der xhtml/css-Umsetzung beginnen, da das Frontend in einigen Wochen fertig sein soll. Jetzt tröpfeln nach und nach weitere Entwürfe rein und langsam zeigt sich, welche Gestaltungsraster es überhaupt gibt, was Standard und was Ausnahme ist.

Das css hat inzwischen schon weit über tausend Zeilen erreicht und ist schon lange nicht mehr so klar, wie man es anfänglich geplant hat. Das Gestaltungsraster, auf welchem die ersten drei Seiten basierten ist nur eines von vielen, auf einer anderen Seite gibt es zwischen der <h1> und der <h2> doch noch eine Überschriftsebene und die roten Links sind eigentlich doch meistens grün.

Zeit für ein „css-Refactoring“, also einer Umstrukturierung des css-Quellcodes, ohne dass sich die Ergebnisse ändern.

Aber wie?

Jetzt wünscht man sich eine automatische Testsuite, die die Seiten zweier Entwicklungsversionen in allen relevanten Browsern vergleicht und die Unterschiede zeigt, damit man sieht, ob die Codeänderungen nicht doch wieder das Ergebnis in irgendeinem Browser ändern.

Da ich so ein Tool nicht kenne, bleiben mir folgende Möglichkeiten

· Den Code Stückchen für Stückchen aufräumen und jede kleine Änderung in allen Browsern testen.
· Den Code so lassen und mit dem Chaos leben
· Nur noch Projekte annehmen, in denen alle Screens gleichzeitig ausgeliefert werden.

Mit keiner Lösung bin ich wirklich zufrieden und jetzt kommt auch die Frage:

Wie macht Ihr das, wenn die Komplexität des css-Code zu groß geworden ist und Ihr den Code verbessern möchtet?

Gruß
Olaf

[Jeena Paradies]

Hallo,

Je nach dem wie viel Zeit/Geld übrig ist schreibe ich das CSS entweder komplett mit dem neuen Wissen neu (geht ja dann auch viel schneller weil die Hauptarbeit des Denkens schon gemacht ist) oder lebe mit dem Chaos.

Jeena

[Olaf Schneider]

Hej Jeena,

Je nach dem wie viel Zeit/Geld übrig ist schreibe ich das CSS entweder komplett mit dem neuen Wissen neu (geht ja dann auch viel schneller weil die Hauptarbeit des Denkens schon gemacht ist) oder lebe mit dem Chaos.

So läuft das bei mir auch, wobei es oft an der Zeit hakt und dann leider doch Lösung zwei wird. Ich habe dann immer Probleme mit meinem Perfektionismus, wenn ich so ein Spaghetti-css abgebe.

… aber wenn es ganz arg wird, gibt es ja zum Glück Firebug …

Gruß
Olaf

[Hopsel]

Hi Olaf!

Jetzt wünscht man sich eine automatische Testsuite, die die Seiten zweier Entwicklungsversionen in allen relevanten Browsern vergleicht und die Unterschiede zeigt [...]

Ich nutze für große Projekte TortoiseSVN. Dort kann man sich zumindest die Unterschiede zwischen zwei Revisionen und damit auch den Dateien anzeigen lassen.

MfG H☼psel

[Olaf Schneider]

Hallo H☼psel,

Ich nutze für große Projekte TortoiseSVN. Dort kann man sich zumindest die Unterschiede zwischen zwei Revisionen und damit auch den Dateien anzeigen lassen.

Versionierung (und diff) ist immer eine gute Idee. Interessant wäre es halt, nicht nur die Quellen, sondern auch deren Resultate in den Browsern automatisiert vergleichen zu lassen.

Ich glaube, da muss ich doch mal etwas genauer drüber nachdenken …

Gruß
Olaf

[Sven Rautenberg]

Moin!

Jetzt wünscht man sich eine automatische Testsuite, die die Seiten zweier Entwicklungsversionen in allen relevanten Browsern vergleicht und die Unterschiede zeigt, damit man sieht, ob die Codeänderungen nicht doch wieder das Ergebnis in irgendeinem Browser ändern.

Sowas wie das hier also ;)

Wie macht Ihr das, wenn die Komplexität des css-Code zu groß geworden ist und Ihr den Code verbessern möchtet?

Mit dem Chaos leben. Möglichst täglich mit dem Code arbeiten, um nichts zu vergessen. Viele Klassen einsetzen, sie funktional benennen. Eine vernünftige, fast schon "universelle" Grobstruktur nutzen. Auf das Beste hoffen.

:)

- Sven Rautenberg

[Olaf Schneider]

Moin Sven,

Sowas wie das hier also

Im Grunde suche ich so etwas:

  
browsers    = new BrowserCollection("IE5.5", "IE6", "IE7", "FF1.5", "FF2", "Safari2", "Opera9")  
website     = new Website  
website.push(oldVersion)  
website.push(newVersion)  
webpages    = website.getAllPages()  
differences = new DifferenceCollection  
  
foreach browsers as browser {  
    foreach webpages as webpage {  
        browser.render(webpage.oldVersion)  
        oldImage = browser.screenshot()  
        browser.render(webpage.newVersion)  
        newImage = browser.screenshot()  
        if oldImage != newImage {  
            diffImage = Image.createDifferenceImage(oldImage, newImage)  
            differences.push(oldVersion.pageName, diffImage)  
        }  
    }  
}  
if (differences.isEmpty) {  
    out "alles prima"  
} else {  
    foreach differences as difference {  
        difference.show()  
    }  
}  

;-)

Gruß
Olaf

[ottogal]

Hallo Sven,

... Eine vernünftige, fast schon "universelle" Grobstruktur nutzen.

Ist diese Grobstruktur "universell" nur für dein "Universum", oder könnte da unsereiner für seines auch davon lernen?

Gruß
ottogal

[Sven Rautenberg]

Moin!

... Eine vernünftige, fast schon "universelle" Grobstruktur nutzen.

Ist diese Grobstruktur "universell" nur für dein "Universum", oder könnte da unsereiner für seines auch davon lernen?

Naja, was haben denn alle Seiten im Web gemeinsam? Header, Navigation, Metanavigation, Contentbereich, Sekundärspalte. Und diese ganzen Elemente werden üblicherweise in <div> gruppiert und mit ID oder Klasse versehen, um dann selektiv z.B. nur h3 im Content anzusprechen, nicht in der Navigation.

- Sven Rautenberg

[ottogal]

Ok, verstanden - danke!
ottogal