Olaf Schneider: (Wie) macht Ihr css-Refactoring?

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

  1. 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

    1. 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

  2. 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

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. 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

  3. 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

    --
    "Love your nation - respect the others."
    1. 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

    2. 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

      1. 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

        --
        "Love your nation - respect the others."
        1. Ok, verstanden - danke!
          ottogal