t3n 15

Layout-Frameworks für Webentwickler: CSS- und Grid-Frameworks erleichtern professionelle Webentwicklung

Seite 4 / 5

Welches ist der bessere Ansatz?

Diese Frage lässt sich nicht sinnvoll beantworten, denn beide Frameworktypen führen zu einer spürbaren Beschleunigung des Entwicklungsprozesses.

Vergleicht man beide Ansätze rein nach dem Zeitaufwand, so beschleunigen CSS-Frameworks die Layouterstellung bereits deutlich im Vergleich zur Handkodierung. Mit Grid-Frameworks geht alles noch ein bisschen schneller, wobei dieser Zugewinn an Geschwindigkeit durch die Einschränkungen auf die Arbeit innerhalb des vorgegebenen Rasters erkauft wird.

Doch auch das ist nicht pauschal als nachteilig zu bewerten, denn die Gestaltungsraster von Blueprint CSS und 960.gs bieten ausreichend Freiraum für die Umsetzung vielfältiger individueller Layoutideen. Die Entscheidung, welche Art von Framework für einen selbst am sinnvollsten ist, richtet sich hauptsächlich nach den eigenen Ansprüchen in Bezug auf die Einarbeitungszeit und die Freiheiten bei der Layoutgestaltung.

Framework-Einsatz kontra Performance?

Layout-Frameworks sind keine Software-Bibliotheken. Eine vollständige Trennung von Framework- und Nutzercode, wie man es bei CakePHP oder jQuery gewohnt ist, ist bei Layout-Frameworks einerseits nur in begrenztem Umfang möglich, andererseits auch gar nicht erwünscht. Layout-Frameworks sind Entwicklerwerkzeuge und als solche meist modular aufgebaut. Das bedeutet, sie stellen verschiedene aufgabenspezifische CSS-Bausteine (Reset-CSS, Layout, Navigationselemente, Druckausgabe usw.) zur Verfügung. Den jeweiligen Anforderungen entsprechend werden die einzelnen CSS-Bausteine ins Layout eingebunden, was den Entwurfsprozess stark beschleunigt, denn dies ermöglicht die Wiederverwendung robuster, erprobter Bausteine, um den Pflege- und Testaufwand auf ein notwendiges Minimum zu reduzieren.

Im Gegensatz dazu verlangt der spätere Produktivbetrieb der Website vorrangig nach Geschwindigkeit. Jeder CSS-Baustein muss einzeln per HTTP-Request beim Server angefordert werden. Jeder Request ist zwangsläufig mit Latenzzeiten verbunden und verlangsamt somit die Darstellung der Webseite. Im Produktivbetrieb ist es daher sinnvoll, die Anzahl der einzelnen Stylesheets durch Zusammenfassen so weit wie möglich zu reduzieren. Ähnliche Vorgehensweisen wendet man bei Grafiken an, Stichwort: CSS-Sprites [9].

Das CSS einer Webseite wird erst im Browser des Nutzers interpretiert und muss zunächst vom Server heruntergeladen werden. Performance im Produktivbetrieb verlangt deshalb nach möglichst kleinen Dateigrößen, um die Ladezeiten möglichst gering zu halten. Erreicht wird dies durch die Komprimierung von CSS-Dateien mit Werkzeugen wie dem YUI Compressor [10] oder dem PHP-Tool minify [11]. Dabei werden Kommentare und unnötige White-Spaces (Leerzeichen, Tabulatoren, Zeilenumbrüche) entfernt, um die Dateigröße zu reduzieren.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Dirk Jesse

Hi Vladimir, thank you for your comment. Of course allmost every framework development makes some improvements but that wasn't the key here. All mentioned grid frameworks are based on the same layout technique. Blueprint CSS and 960.gs seem to be the "big players" that make CSS-based grid-layouts easy for everyone. Other frameworks like Emastic use the same techniques. Of course also YAML and YUI are using floats (Who doesn't?) but there layout techniques differ from the the basic "grid" solution as they provide more flexible column-based layout solutions - and are therefore a little more complex.
I fully agree with your advice. There's no best or worst framework. Users should test them and use the one, that fits best to their needs and workflow.

Vladimir Carrer

I used google translate in order translate this article from German. I sow in the article that my framework Emastic is been called (clone) of Blueprint or 960.gs.

Here is little history:First came YAML but was to difficult to be understand, then Blueprint was based on ljworld.com layout (Frameworks for Designers) then came 960.gs with the same building logic like Blueprint. So everything is clone or copy of Blueprint. Or every framework based on "float" is copy of Blueprint!?

There are different points of view I will say 960.gs is evolution of Blueprint.

When I build Emastic I wonted to be improvement of the other CSS Frameworks. It is the first lightweight framework(only 4kb) it is the first to implement easy fluid column, it is the first to implement 3 layout system and many other original solutions.

My advice is if you want to understand how one CSS Framework works open the code and try to understand it. If you like the code and the logic of that framework, use it.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung