WordPress & Webwork

Gastartikel: Turbine: ein PHP-Framework um schneller und problemfreier Stylesheets zu schreiben

Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf.

Einem Frontendentwickler macht das in vielen Situationen durchaus Spaß. Es gibt aber auch solche Fälle, in denen man einfach nicht die Zeit und/oder das Budget für so viel Handarbeit zur Verfügung hat. Oder es ist einem einfach gerade zu stupide.

Und in solchen Fällen könnte in Zukunft das Framework Turbine zum Einsatz kommen.

Das Mantra: Weg mit allem Überflüssigen

Turbine entstand im Laufe des letzten Dreivierteljahrs und ging aus einem Projekt von Peter Kröner (@sir_pepe) hervor. Peter schrieb damals an einem CSS zu PHP-Array Parser/Umwandler, in den ich nach und nach als Kollaborator immer tiefer involviert wurde.

Was ursprünglich nur als kleines Werkzeug Stylesheets auf- bzw. nachbereiten sollte, wurde im Laufe unserer Arbeit daran immer umfangreicher, und vor allem radikaler in seinem Ansatz. So landeten Peter und ich irgendwann an einem Punkt, an dem wie einen neuen Stylesheet-Dialekt vor uns liegen hatten, kombiniert mit einer PHP5-Bibliothek, die diese Sprache nach altbekanntem CSS weiterverarbeitet.

Für die Ausarbeitung dieser Sprache nahmen wir das Beste aus CSS sowie aus anderen ähnlich ausgerichteten Frameworks wie Sass, Less und Scaffold und sattelten eigene Ideen obendrauf.

An Less fanden wir gut, dass es auf die Zeichen {, } und ; verzichtet. Alles unnötige Tipperei in unseren Augen! Als strukturienden Ersatz verordneten wir Turbine wie bei Less eine etwas striktere, an Python angelehnte Schreibweise, in der Einrückungen die Rolle der geschweiften Klammern übernahmen, und in der jede Eigenschaftszuweisung zwingend in eine eigene Zeile wandert, die aber eben nicht mehr auf einem Semikolon enden musste (allerdings immer noch kann).

Aus einem


#foo, #bar {
	color: #FF0000;
	margin-left: 4px;
	margin-right: 4px;
}

in CSS wurde in unserer zeichensparenden Syntax nun ein


#foo, #bar
	color: #FF0000
	margin-left: 4px
	margin-right: 4px

Durch die Einrückung nach dem Selektor erkennt Turbine, dass wir es ab da mit Eigenschaften zu tun haben. Auch bei den @media rules lassen wir die geschweiften Klammen weg:


@media screen
#foo
	background:red

@media print
#foo
	background:green

ergibt:


@media screen {
	#foo {
		background:red;
	}
}

@media print {
	#foo {
		background:green;
	}
}

All diese Anweisungen werden nicht mehr in .css- sondern in .cssp-Dateien abgelegt, die dann zur Laufzeit von Turbine in übliches (manchmal auch unübliches) CSS umgewandelt werden. Das geht so, dass man das Framework in seiner PHP-angetriebenen Seite folgendermaßen einbindet:


<link
	rel="stylesheet"
	href="pfad/zu/turbine/css.php?files=styles.cssp"
/>

Also ganz easy, einfach anstelle einer CSS-Datei, und in dem Parameter files benennt man eine oder, kommasepariert, mehrere .cssp-Dateien, die Turbine aufbereiten soll. Die Pfadangabe der .cssp-Dateien ist dabei relativ zum Ordner, in dem Turbine, also die css.php-Datei liegt.

Wir bringen etwas intelligente Logik ins Spiel

Doch damit sind die arbeitssparenden Maßnahmen bei Weitem noch nicht erschöpft, denn sonst würde sich der ganze Aufriss ja gar nicht lohnen.

Inspiriert von den anderen genannten Frameworks und geleitet von unseren eigenen Bedürfnissen, haben wir darüberhinaus allerlei Kurzschreibweisen-Logik eingebaut.

Selektorverschachtelung

Zum Beispiel die Selektorverschachtelung. Durch diese wird es beispielsweise möglich, folgendes zu schreiben:


#foo div > p
	color:red
	font-weight:bold
	span
		color:blue

Diese Anweisung transformieren wir dann in folgendes CSS:


#foo div > p {
	color:red;
	font-weight:bold;
}

#foo div > p span {
	color:blue;
}

Und spätestens bei Konstellationen wie dem nachfolgenden Konstrukt spart das richtig viel Arbeit:


#header, #footer
    ul, ol, p
        a:link, a:visited
            text-decoration:underline
        a:active, a:hover
            text-decoration:none

Dies entspräche in klassichem CSS nämlich diesem Mammut-Apparillo:


#header ul a:link, #header ul a:visited,
#header ol a:link, #header ol a:visited,
#header p a:link, #header p a:visited,
#footer ul a:link, #footer ul a:visited,
#footer ol a:link, #footer ol a:visited,
#footer p a:link, #footer p a:visited {
	text-decoration: underline;
}
#header ul a:active, #header ul a:hover,
#header ol a:active, #header ol a:hover,
#header p a:active, #header p a:hover,
#footer ul a:active, #footer ul a:hover,
#footer ol a:active, #footer ol a:hover,
#footer p a:active, #footer p a:hover {
	text-decoration: none;
}

Zusammengefasste Eigenschaften

Wir haben darüberhinaus die "expanding properties", die sehr praktisch bei der Zuweisung ein und desselben Wertes zu mehreren Eigenschaften sind.


#foo
	position:absolute
	top, left:4px

…extrahiert sich zu folgendem CSS:


#foo {
	position: absolute;
	top: 4px;
	left: 4px;
}

Variablen für Eigenschaftswerte und für Selektoren

Sicherlich ein Wunsch vieler Coder ist die Möglichkeit Variablen für Wertzuweisungen innerhalb von CSS zu verwenden. So etwas hilft besonders in solchen Situationen, wo zum Beispiel Farben seitenweit ausgetauscht werden müssen.

Bei Turbine haben wir zu diesem Zweck "Konstanten" für Eigenschaftswerte und "Aliase" für Selektoren.

In beiden Fällen setzt man im Kopfbereich der .cssp-Datei einen @constants– (Eigenschaftswerte) oder @aliases-Block (Selektoren) ein, der alle Definitionen aufnimmt, auf die man im Anschluss als Representanten zurückgreifen kann.


@constants
	myRed:#C02222
	imagePath:/assets/images

#foo
	color:$myRed
	background:url($imagePath/foo.png) top left no-repeat

Hier haben wir die Konstanten $myRed und $imagePath erstellt und sie dann in unseren Styleinganweisungen verbaut. Das daraus erzeugte CSS sieht deshalb so aus:


#foo {
	color: #C02222;
	background: url(/assets/images/foo.png) top left no-repeat;
}

Die beiden Konstantenwerte wandern in die Eigenschaften und unser Definitionsblock wird anschließend herausgenommen.

Aliase funktionieren ähnlich, sind aber wie gesagt für Selektoren zuständig. Ein…


@aliases
	mainNavigation: #wrapper #header > div ul

$mainNavigation
	list-style:none

…ergibt:


#wrapper #header > div ul {
	list-style: none;
}

Eigenschaften anderer Selektoren kopieren

In Turbine könnt Ihr Eigenschaftswerte anderer Selektoren mit "copy" kopieren/übernehmen:


#foo
	background:#F00

#bar
	color:copy(#foo background)

Eigenschaften erben

Oder Ihr könnt ganz im Sinne der Objektorientierung neue Selektoren alle Eigenschaften eines anderen Selektoren erben lassen. Die Anweisung…


#parent
	color:red
	font-weight:bold

div.child
	extends:#parent
	margin:4px

…sorgt für folgende Ausgabe im CSS:


#parent {
	color: red;
	font-weight: bold;
}
div.child {
	margin: 4px;
	color: red;
	font-weight: bold;
}

Soviel ersteinmal zu den möglichen syntaktischen Verkürzungen. Es gibt noch ein paar mehr Spielarten, die Ihr allesamt im entsprechenden Abschnitt der Turbine-Dokumentation nachlesen könnt. Auch findet Ihr dort etwas tiefergehende Infos zu den eben abgehandelten Features.

Plugins für Bugfixes, für CSS3, für Performance, etc.

Die syntaktischen Verkürzungen sparen uns schon einiges an ungeliebter Arbeit. Was uns aber außerdem viel Arbeit macht, ist der Kampf mit den Browsern. Mal dürfen wir uns mit Darstellungsfehlern der IEs herumschlagen, mal geht es darum, für jeden Browser einzeln irgendwelche fortschrittlicheren Darstellungsformen handzuklöppeln, etwa Schriftarten Einbinden, Inline-Block zu faken, oder das browserübergreifende Erzeugen von Transparenzen, Schatten und anderen CSS3-Effekten.

Und hier kommen die Turbine-Plugins ins Spiel, welche uns dabei unter die Arme greifen.

Es gibt Plugins, die im stillen Kämmerlein Bugs fixen oder Browser um Basisfähigkeiten erweitern. Andere sorgen dafür, dass wir CSS3-Features heute schon nutzen können, indem sie Code erzeugen, den alle Browser verstehen.

Plugins aktivieren

Um eines der Plugins zu nutzen, aktivieren wir es in einem speziellen Kopfbereich der .cssp-Datei, hier zum Beispiel aktivieren wir gleich drei von ihnen:


@turbine
	plugins:boxsizing,borderradius,transforms

Diverse Plugin-Gattungen

Mit Turbine liefern wir eine ganze Palette von Plugins mit, 17 an der Zahl.

Das bugfixes Plugin behebt allerlei Abstandsprobleme in den IEs (unterer "Geistermargin" bei Bildelementen, doppelter Abstand bei Floats, Geisterpadding in Buttons), verhindert im IE6 Hintergrundbildflackern, rüstet im IE6 min-height nach, verbessert die skalierte Bilddarstellung im IE7, entfernt Geistermargins im Firefox um Buttons. Auch bringt es dem IE6 via Behavior :hover für alle Sorten Elemente und schließlich PNG Alphatransparenzen bei.

Das html5-Plugin rüstet Defaultstyles für alle neuen HTML5-Elemente nach, und zwar so wie die Defaultsstyles laut W3C geplant sind (betrifft vor allem display: inline; und display: block;);

resetstyle enthält eine Sammlung von Eric Meyer inspirierter Reset-Anweisungen, mit denen man global alle Margins und Paddings in allen Browsern auf Null zurücksetzt, das Listen in normale Blockelemente wandelt, Schrifteigenschaftenvererbung für Formularfelder und Tabellen aktiviert, und noch ein/zwei Dinge mehr.

Die Plugins @font-face, backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, inlineblock, opacity, transforms rüsten wiederum in allen Browsern Unterstützung von CSS(3)-Eigenschaften nach.
Das gilt außer beim borderradius-Plugin explizit auch für die IEs!

Bei borderradius boxshadow, boxsizing, inlineblock, opacity, transforms verwenden wir einfach die vom W3C vorgesehenen Deklarationen und die Plugins setzen das dann in vendor-prefixte Varianten und teilweise in IE-Filter und -Behaviors um. Beispiel:


@turbine
	plugins:boxsizing

#foo
	box-sizing:border-box

Ergibt:


#foo {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	behavior: url(plugins/boxsizing/boxsizing.htc);
	box-sizing: border-box;
}

Die visuellen Resulate sind dann in allen Browsern die gleichen.

Andere Plugins haben eigene Syntaxen, weil es entweder noch keine Übereinkunft gibt, oder um Tippaufwand zu sparen.

@font-face funktioniert zum Beispiel so, dass man in einem Ordner möglichst viele gleichnamige Schriftdateien aller Formate (eot, ttf, woff&hellip) ablegt, um sie dann mit einer kurzen Anweisung einbinden zu lassen.
Sagen wir also wir hätten in einem Unterordner fonts/ folgende Dateien hinterlegt:

SaginawMedium.eot
SaginawMedium.woff
SaginawMedium.otf
SaginawMedium.ttf
SaginawMedium.svg

Dann könnten wir sie mit dieser Anweisung einbinden:


@font-face
	font-family:'SaginawMedium'
	src:url('fonts/SaginawMedium')
	font-weight:bold
	font-style:italic

backgroundgradient erzeugt browserübergreifend zweifarbige lineare Farbverläufe für den Hintergrund eines Elements. Da sich noch keine einheitliche Syntax herausgeschält hat, Mozilla aber am nächsten am aktuellen Vorschlag des W3C dran ist, haben wir uns syntaxmäßig auf dessen Seite geschlagen. Dies der wäre der Aufruf, um einen vertikalen Farbverlauf von oben Weiß nach unten Schwarz zu erzeugen:


#foo
	background-image: linear-gradient(top,#FFF,#000)

colormodels rechnet hingegen alle Vorkommnisse an HSL(A)-Farbwerten für Browser die damit nichts anfangen können in RGB(A) Werte um.
Im IE funktionieren HSLA- und RGBA-Werte, wenn wir damit Hintergrundfarben definieren, in allen anderen Fällen nur HSL ohne Transparenz und natürlich RGB.

minifier und datauri steigern wiederum die Ladegeschwindigkeit des resultierenden CSS. Das erste, indem es dieses minifiziert, also von überflüssigen Leerstellen, Nullen und Einheiten befreit und wo möglich Shorthand Notationen einsetzt. Das zweite spart HTTP-Requests ein, indem es Datei-Resourcen, die es in den Styles findet und die unter 24K wiegen per Data-URI, oder für die älteren IEs per MHTML, einbettet.

Des sniffer-Plugins bedient Ihr Euch, wenn Ihr Styles nur ganz bestimmten Browsern oder Plattformen servieren wollt, bzw. wenn Ihr die ganz bestimmten Browsern oder Plattformen vorenthalten wollt. Beides ist möglich.

Gesetzt den Fall, Ihr wolltet etwas nur auf Desktops in der Textfarbe rot darstellen, dann könntet Ihr bei aktiviertem Plugin folgende Anweisung schreiben:


#foo
	device:desktop
	color:red

Der Selektor #foo mitsamt all seinen Eigenschaften würde dann nur noch in dem Fall an den Browser durchgereicht, wo dieser ein Browser einer Desktop-Plattform ist (also z.B. nicht an iPhones, iPads, WebOS, etc.).

Wenn Ihr die Textfarbe rot für alle Plattformen, außer den Mobilgeräten ausliefern wollt, dann schreibt…


#foo
	device:^mobile
	color:red

Neben device kennt der sniffer auch noch os mit Versionnummern oder -namen:


// Nur Mac
#foo
	os:mac
	color:pink

// Nur für Windows neuer als Vista
#bar
	os:windows>=vista
	color:lightblue

// Nur für Windows neuer als Vista
#goatse
	os:windows>=6
	color:blue

// Für alle außer Linux
#tubgirl
	os:^linux
	color:red

Und er kennt die Eigenschaft browser:


// Nur für IE
#foo
	browser:ie
	color:darkblue

// Nur für Firefox Versionen neuer als 3.5
#bar
	browser:firefox>3.5
	color:orange

// Nur für Safari 4
#goatse
	browser:safari=4
	color:lightblue

// Nicht für Chrome
#tubgirl
	browser:^chrome
	color:green

Und zu guter letzt haben wir noch die Meta-Plugins css3, performance, legacy und utility. Diese sind selbst eigentlich keine Plugins (daher auch: Meta-Plugins), sondern sie fassen mehrere Plugins in Funktionsgruppen zusammen, um sie gemeinsam aktivieren zu können (und wieder Tipparbeit zu sparen).

Das css3 Meta-Plugin besteht zum Beispiel aus der Sammlung backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, opacity und transforms. Anstatt alle Plugins einzeln zu aktivieren kann man nun ganz einfach folgendes deklarieren:


@turbine
	plugins:css3

Und schon sind sie allesamt aktiv!

Zieht all das nicht mächtig an der Performance?

Unclever programmiert täte es das aufgrund zahlreicher Regular Expressions und Plugin-Schleifen sicherlich. Es ist aber nicht unclever programmiert. Turbine nutzt serverseitiges Caching. Einmal verarbeitete Ergebnisse werden aufbewahrt und so lange nicht neuberechnet, wie auch die .cssp-Quelldateien unverändert bleiben. Es geht serverseitig also nicht sonderlich viel Extrazeit drauf.

Desweiteren würden wir sogar soweit gehen, zu behaupten, dass Eure Seite durch den Einsatz von Turbine clientseitig sogar schneller ist als wenn Ihr den klassischen Weg einschlagen würdet. Denn unser CSS-Output ist kombiniert und mindestens ZIP-komprimiert, bei Nutzung unseres performance-Metaplugins sogar noch minifiziert und von unzähligen bremsenden HTTP-Requests befreit. Zu guter letzt sendet Turbine dem Browser auch nur dann alle Daten, wenn dieser den Output nicht schon bei einem vorherigen Aufruf geladen hat und sie bei ihm noch im Cache liegt. Das spart Übertragungszeit zum Client, und natürlich auch Traffic!

Was man zum Loslegen braucht

Wenn Ihr jetzt angefixt seid und Turbine ausprobieren wollt, was wir schwer hoffen, dann geht Ihr am besten in die Download-Sektion unseres Projekts bei Github und ladet Euch dort die aktuellste Version herunter.

Dann entpackt Ihr alles in einen Ordner auf Eurem PHP5-getriebenen Webspace (PHP5 ist Pflicht!), zum Beispiel den Ordner /turbine. Ihr könntet nun einen weiteren Ordner /css anlegen, darin eine style.cssp mit den Turbine-Anweisungen. Zu guter letzt bindet Ihr das Style beispielsweise in der index-Datei im Root per HTML, wie ganz oben erwähnt, folgendermaßen ein:


<link rel="stylesheet" href="turbine/css.php?files=../css/styles.cssp"/>

Dokumentation

Eine sehr umfangreiche und hoffentlich gut verständliche Dokumentation zu den Sprachfeatures, den Plugins und dem Einrichten von Turbine findet Ihr auf http://turbine.peterkroener.de. Ist allerdings in Englisch.

Fragen?

Für Fragen haben wir zum einen eine FAQ-Sektion, aber auch eine Frage/Antwort-Plattform für Turbine auf Qhub.

Code Highlighting und Autocompletion für Turbine-Syntax in Webeditoren

Uns ist bewusst, dass Ihr wenig Lust habt auf die unterstützenden Funktionalitäten Eures Lieblings-Webeditors zu verzichten, also konkret das Einfärben des Codes sowie die automatischen Befehlsvorschläge. Deshalb haben einige Mithelfer und wir uns an Plugins bzw. Erweiterungsmöglichkeiten für einige Editoren drangesetzt und Lösungen für Dreamweaver, UltraEdit, GtkSourceView (also Gedit und Anjuta), sowie TextMate in petto.

Ihr findet einen Fehler? Stellt Dinge zur Diskussion?

Lasst es uns wissen, indem Ihr einen Eintrag in unsere Issues-Abteilung bei Github vornehmt. Schaut aber vorher, ob dieser Bug, oder ein solcher Vorschlag nicht schon existiert.

Christian Schaefer (Schepp) Christian Schaefer ist Jahrgang ‘78, hat seine Wurzeln bei Köln, lebt aber seit 2004 unbehelligt in Düsseldorf, und wird von jedermann außer den Eltern "Schepp" genannt. Und das ist auch gut so. Es verschlug ihn 1998 ohne Studium direkt in eine 3D-Firma in Köln. Dort entwickelte er virtuelle Figuren für Messen und TV. Selbstständigmachung Anfang 2004 und Verlagerung des Fokus’ auf die Webentwicklung. Sieht seine Schwerpunkte bei der Frontend-Entwicklung, hat aber auch kein Problem mit Backends und dem Architekten großer Sites in PHP und MySQL. Fertige CMSe nerven ihn. Frameworks sind OK. Nebenbei unterstützt er technisch den Kölner Multimediatreff, hat gerade ein Videotraining biblischen Ausmaßes in der Mache. Er twittert unter dem Account derSchepp und mag alles was sich um Essen dreht.

26 Reaktion(en)

  1. Rene

    Sieht mir sehr stark nach Sass von Ruby aus … fand die Idee damals schon ganz praktisch durch indents entsprechend sein CSS aufbauen zu können ohne sich jedes Mal nen Wolf tippen zu müssen. Noch praktischer, vorallem für dauernde Änderungen durch Kunden ("können wir die Farbe noch ein wenig so und so machen?") die Option auf constants. Werde ich mir mal für ein späteres Projekt mal näher anschauen … thx. 🙂

  2. Caracasa

    Auch wenn ich mir selber nicht vorstellen könnte, mir für diesen Zweck noch ein weiteres Framework ins Boot zu holen, freue ich mich doch, dass die Regeln für tubgirl und goatse beide nicht für Linux-User gelten.

    Damit verschwindet natürlich der entsprechende Content noch nicht. 🙄

  3. Bertram Simon

    Hallo Christian,

    ich habe eine einige Zeit mit scaffold und sass herumexperimentiert und fand das Ergebnis sehr gut. Meiner subjektiven Meinung nach rendern Browser sauber verschachtelte CSS-Anweisungen schneller, als unstrukturierte Anweisungen.

    Bei den Beispielen von Turbine sehe ich viele Parallelen. Ich stehe den Framework aufgrund der Zeitersparnis sehr positiv gegenüber.

    Habt ihr auch vor, einen css2cssp Konverter zu programmieren? Dann kann man alte Projekte auf Turbine umstellen:-)

    Liebe Grüße
    und danke für die gute Arbeit!

    Bertram

  4. Maik Wagner

    Wow, Respekt!
    Schon wieder eins von diesen Projekten, die so groß sind, daß man sie mal in Ruhe ausprobieren muß.
    Und nicht nur rausgehauen, sondern auch solide dokumentiert, so mag ich das.

    Turbine steht bei meinem nächsten Projekt auf jeden Fall auf dem Zettel.

    @Vlad: Gib dem Schepp ruhig was ab von meinen flattr-Cents 😉

  5. Eric Eggert

    Naja, das klingt ja erstmal alles ganz gut, aber die Vermischung von Properties und Selektoren ist dann doch eher Fragwürdig, dazu die Abhängigkeit von Einrückungen, das halte ich doch für extrem unübersichtlich. Für CSS gibt es so viele schöne Entwicklertools, da brauche ich nicht noch einen Abstraktionslayer. Wenn dann da auch noch sowas raus kommt:

    #header ul a:link, #header ul a:visited,
    #header ol a:link, #header ol a:visited,
    #header p a:link, #header p a:visited,
    #footer ul a:link, #footer ul a:visited,
    #footer ol a:link, #footer ol a:visited,
    #footer p a:link, #footer p a:visited {
    text-decoration: underline;
    }
    #header ul a:active, #header ul a:hover,
    #header ol a:active, #header ol a:hover,
    #header p a:active, #header p a:hover,
    #footer ul a:active, #footer ul a:hover,
    #footer ol a:active, #footer ol a:hover,
    #footer p a:active, #footer p a:hover {
    text-decoration: none;
    }

    dann glaube ich, dass es da ein grundlegenden Hang zu bloatcode gibt, ein

    #header a:link, #header a:visited, #footer a:link, #footer a:visited {text-decoration:underline;}
    #header a:active, #header a:hover, #header a:focus, #footer a:active, #footer a:hover, #header a:focus {text-decoration:none;}

    reicht in dem Fall doch bei weitem aus. Das eingebaute Browser-Sniffing ist dann nur noch die Höhe und kann nicht nachhaltig sein. CSS ist nicht schwer, es ist robust und schnell. Warum man noch eine Sprache auf einer Meta-Ebene lernen soll werde ich nie verstehen.

  6. datenkind

    Ach mann Eric, manchmal hab ich das Gefühl, dass du zu viel Zeit mit Meckern verbringst.

    Natürlich ist CSS nicht schwer, allerdings finde ich es nie verkehrt, wenn man Optimierungspotential ausschöpft und solche Wege nutzt. Gerade das Thema Variablen ist doch genial.

    Zum Glück gibt’s keinen Nutzungszwang, also schon einfach mal deine Nerven. 😉

  7. Schepp

    @Bertram
    Danke für das positive Feedback!
    Einen CSS zu Turbine Converter gibt es schon, und zwar hier:
    http://turbine.peterkroener.de/docs.php#tools-converter

    @Maik
    Danke Dir ebenfalls! Und der Vlad ist ein sehr, sehr spendabler. Allenfalls liegt’s an meiner eigenen Lahmarschigkeit was das Anmelden bei Flattr & Co angeht (VGWort-Extended Anmeldung ist in der Mache) 😳

    @Eric
    Wir zwingen Dich zu nichts, Du darfst das ruhig nicht benutzen. Ich verstehe auch Deine Bedenken als CSS-Purist.

    Was Dein Code-Zitat angeht, so ist das ganz klar Bloat ein schnell konstruiertes Beispiel, das aufzeigen soll, in welchen Situationen man über Sektorverschachtelung nachdenken kann. Diese Aufgabe erfüllt es auch.

    Der Browser-Sniffer ist kein fester sondern ein optionaler Bestandteil, dessen Nachteile wir nicht unter den Tisch fallen lassen, sondern an folgender Stelle einen prominenten Platz einräumen: http://turbine.peterkroener.de/docs.php#plugins-sniffer

  8. Eric Eggert

    Entschuldigt, ich fühle mich nicht genötigt eines von diesen CSS-Verkomplizierungstools zu benutzen, ich weiß gar nicht wie ihr darauf kommt. Ich möchte mit meinem Kommentar den Artikel kommentieren, eine andere Meinung einstreuen. Das ist – so weit ich weiß – Sinn und Zweck von Kommentaren.

    Es gibt zwei Seiten der Medaille, ich betrachte die andere Seite. Das finde ich nur fair. Jemand der den Artikel (und die Kommentare) liest soll wissen, dass es auch andere Meinungen dazu gibt.

  9. datenkind

    Dann ist, laut deiner Argumentation, ein Framework wie MooTools oder jQuery ebenfalls „unsäglich“, da man sich einen neuen Abstraktionslayer für reines JavaScript aufbaut (ja, es wird einfacher dadurch), der a) erlernt werden muss und b) von der ursprünglichen Syntax abweicht. Oder PHP-Frameworks …

    Ich denke mal, dass es hier gengügend Leute gibt – nicht nur du – die effektives und schlankes CSS schreiben können. Wenn sich aber ein Entwickler mit einer Möglichkeit befasst, die es ihm erleichtern können sein Werkzeug vielleicht noch effektiver zu nutzen, dann sind solche Ansätze doch super.

  10. Schepp

    Was ich bislang vergessen habe: Wer nur mal schnell rumspielen und experimentieren will, der kann dazu unsere Turbine Shell heranziehen und sich dort nach Kräften austoben.

    Disclaimer: jeglicher Shell-Output, der auf externe Plugin-Resourcen, also Bilder oder HTCs verweist, hat in der Shell (und nur da) einen falschen Pfad (betroffen wäre zum beispiel der Verweis auf das für Opera generierte Gradient-SVG, aber auch manche IE-Heilpflaster)

  11. Andreas Dantz

    Ich muss Eric größtenteils recht geben. In meinen Augen führt eine Abstraktion von CSS in den meisten Fällen am Ende zu einer CSS-Datei, die umfangreicher ist als notwendig.

    Ich benutze zwar mittlerweile selbst häufig einen Verbund aus SASS bzw. SCSS, Compass und Lemonade. Ich nutze dabei aber bewusst nur Dinge für die automatische Generierung von Vendor-Prefixes (solange sie nötig sind) und CSS-Sprites. Alles andere birgt in meinen Augen die Gefahr, dass genau solcher aufgeblasener Code entsteht, wie im Beispiel.

    Ich mache mir lieber ein paar Gedanken zum Aufbau meiner CSS-Datei und spare dann an Dateigröße und zu wartendem Code, als bei den zu tippenden Klammern.

  12. Alexander

    Bisher waren meine CSS-Datien so klein, dass ein Framework erstmal nur das Ganze eine Ecke komplizierter macht. Aber ich erkenne genug Fälle, wo das Framework mir viel Arbeit ersparen kann.

    Mir ist es lieber, dass den Code, den ich bearbeite übersichtlich und einfach wartbar ist. Turbine ermöglicht das ohne auf Optimierungsmaßnahmen zu verzichten. Ich habe nämlich nicht genug Zeit um alle Varianten einer Eigenschaft zu suchen und optimiert habe ich bisher gar nicht. Wenn ich irgendeine Datei gebraucht habe, habe ich sie einfach eingebunden. Fertig und ein Request mehr. :mrgreen:

    Wenn ich stattdessen Turbine einsetze, dann kann die ausgelieferte CSS-Datei so kryptisch aussehen, dass nur ein richtiger CSS-Experte da noch etwas nachträglich ändern kann ohne neu Fehler einzubauen. Ich jedenfalls muss mit dieser optimierten CSS-Datei nicht arbeiten, weswegen ich da jede Optimierungsmöglichkeit nutzen kann, die Turbine kennt.

    Ein CSS-Purist kann also auf Turbine verzichten, aber der Ansatz von intuitiven Code und zuschaltbarer Features und Optimierungsstrategien macht die Entwicklung um einiges effektiver und weniger fehleranfällig.

    Auch wenn Turbine in einigen Fällen den Code unnötig aufbläht, ich kann das immer noch besser: Einfach eine weitere CSS-Datei eingebunden und schon ist die Ladezeit länger als würde ich das ganze erst Turbine vorwerfen.

  13. antpaw

    Hey super Arbeit Jungs, auch die Umstellung auf die whitespace-insensitive SASS syntax macht sehr viel Sinn. Sie ist wirklich sehr viel übersichtlicher und schneller zuschreiben als diese ;{}. Habe den Unterschied bei ein paar rails Projekten richtig stark gespürt. Auch die helper für die vendor prefixes hölle sind eine feine sache. Arbeit ihr schon an einer tween syntax für die transitions (hab die glaube ich nicht gesehen)? Was mich etwas stört ist das cache system und dass man es nicht synchron mit dem mainpage loading laufen lassen kann. Aber wenn ich Zeit habe dann fork ich euch wieder :)!

    @eric eggert: probier einfach turbine oder sass aus. ich kenne keinen der das nach ein paar tage nicht für unersetzlich (in großen Projekten) hielt.

  14. Schepp

    @Andreas Dantz
    Zum einen: Das ist vernünftige Kritik in einer vernünftigen Form, Danke!

    Zu Deinem Punkt: Klar bergen die neuen Möglichkeiten von Turbine Gefahren, keine Frage. Allerdings blüht einem das doch immer, wenn man sein Gehirn an der Garderobe abgibt.

    Du kannst ja nun auch mit nacktem CSS schön viel Mist bauen (Stichworte: ComicSans-Farb-Augenkrebs, ineffiziente Selektoren, Oldschool-Parser-Hacks, etc.). Aber Du kannst Dir bei Turbine mehr Zeit für’s Denken nehmen und musst weniger davon auf’s Tippen vergeuden. Darum geht’s uns letztendlich nur.

    Und wer Lust hat, der nutzt ganz allein nur die Plugins und lässt die Syntaxlogik links liegen. Geht ja auch.

    @antpaw
    Die Transitions wie auch manch anderes haben wir noch außen vor gelassen. Erstere weil sie momentan nur in homöopathischen Dosen von den Clients unterstützt werden, die anderen weil sie zwar fast aber ebenfalls nicht ganz crossbrowser-tauglich sind. Und das war eigentlich die Prämisse, dass wir nur Plugins dazupacken, die überall Ergebnisse produzieren.

    Einzige Ausnahme dieser Regel ist das borderradius-Plugin, das so heissbegehrt ist, dass wir es trotz fehlender IE-Unterstützung hineingenommen haben. Ob wir für den IE jemals die VML-gestützten runden Ecken nachrüsten steht in den Sternen. Die sind nämlich mit sehr viel Vorsicht zu genießen.

    Alles, was es nicht in die Haupt-Turbine schafft, parken wir aber in einem Extras-Bereich. Dort findest Du derzeit 4 CSS3-Vendorprefix-Plugins, unter anderem auch Transitions. Bei Bedarf, einfach downloaden und bei Turbine dazuparken.

  15. antpaw

    ja solang die properties gleich heißen und sie das gleiche mit den values machen ist das kein problem, aber zB beim "border-radius: 5px 50px" wird das nicht gleich aussehen in webkit und moz.

  16. Andreas Isaak

    Turbine finde ich schon länger interessant, leider verwende ich keines der oben aufgeführten Editoren. Ist denn vielleicht schon jemand dran und arbeitet an einer Notepad++ Extension?

    Ohne die geschweiftern Klammern lässt sich im NP kaum arbeiten 😉

  17. Bertram Simon

    @Eric Eggert, @Andreas Dantz

    Henry Ford:

    "Wenn ich die Menschen gefragt hätte, was sie wollen,
    hätten sie gesagt: schnellere Pferde."

    Ich finde, Dateigröße ist nur eines von vielen Kriterien von Turbine. Skalierbarkeit, Automatisierung, Wiederverwendbarkeit, Redundanz, Usability, Lesbarkeit, Zeitersparnis usw. sind weitere Kriterien. Allein das Auseinandersetzen mit Frameworks erweitert den Horizont und schenkt einem die Möglichkeit der Selbstreflexion.

    Ich habe in der Zwischenzeit ein kleines Projekt mit Turbine umgesetzt. Fazit: Installation unter 5 Minuten, die Einarbeitungszeit war danke guter Doku niedrig (ca. 1/2 Stunde), der Output entspricht meinem manuellen CSS-Code. Ich habe das Menü über Variablen so erstellt, dass ich es für andere Projekt mit anderen Farben und Schriften schnell wiederverwenden kann. Beim nächsten Projekt spare ich also Zeit!

    Ich kann mir gut vorstellen, dass ich mit der neuen Arbeitsweise Ideen zur Optimierung habe, die mir beim manuellen Codieren nicht gekommen wären.

    @Schepp
    Der Converter ist nicht perfekt, aber eine echte Arbeitserleichterung. Danke für den Tipp!

  18. Andreas Isaak

    @Scheep

    Mein Kollege und ich haben mal was für Notepad++ fertig gemacht. Es ist zwar keine extra Extension aber eine kleine style.xml mit der man .cssp etwas besser darstellen lassen kann als es Notepad++ normalerweise macht.

    Kann ich dir die Datei zukommen lassen? Vielleicht entwickelt ja jemand daraus eine Extension.

  19. Schepp

    @Andreas Sauber!

    Wir können das ja schonmal zu Turbine dazupacken, da es ja so auch schon sehr hilfreich ist, und entweder es entwickelt jemand anderes noch eine Code-Vervollständigung, oder wir machen das wenn wir mal was Muße haben. Hab Dir eine E-Mail geschickt.

  20. Andi

    An sich ein schönes Projekt, aber scheinbar ist es eingeschlafen. Habe das Script gerade getestet und auch noch einige Bugs entdeckt, z.B. das Border-Radius und Gradients im IE7 eine falsche Farbe haben und statt des Radius wird das Objekt sehr seltsam dargestellt. Eine Eigenschaft text-shadow ist im System scheinbar nicht vorgesehen. Und die "Issues" Abteilung bei dem Projekt auf Github enthält viele Bugmeldungen, aber kaum Reaktionen. Die letzte Beta-Version ist ein halbes Jahr alt, die letzte Stable auch. In der Zeit ist viel passiert, was die Browser angeht.

    Es scheint, das Projekt ist wie vieles von Peter Kroener seinem Autorendasein zum Opfer gefallen. Schade drum!

    Fazit: Nette Idee, aber man muss auch dranbleiben 😕

Die Kommentare in diesem Beitrag sind geschlossen.