Bootstrap vs. foundation
Das Fachmagazin meines Vertrauens, die Screenguide klopfte vor einigen Wochen an meine Tür. Nicht aber als Konsumgut, sondern als Auftraggeber. Und so nahm ich meine gute Journalistenschule Huckepack und webte die Titelstory zur Ausgabe 21: Bootstrap VS. Foundation.
Natürlich werde ich mich hüten, die Inhalte des siebenseitigen Artikels, der die beiden CSS-Frameworks einem ausführlichen Vergleich unterzieht, hier breit zu treten. Aber eine Ergänzung darf hier Platz finden.
Im Bericht erwähnt ich SASS und LESS und deren wunderbaren Funktionen, CSS-Klassen einfach zu inkludieren oder zu erweitern. Doch kürzlich stieß ich in einem Praxisprojekt auf eine nicht ganz triviale Stolperfalle.
Vorsicht mit extend .frameworkklasse
Im konkreten Fall wurde im SASS-Kontext, der zuvor das praktische Foundation geladen hatte, die Klassen .columns und .row durch ein extend in das projektbezogene CSS inkludiert.
/ Never do this in SASS using Foundation: /
.my_column{
@extend .columns
}
.my_row{
@extend .row
}
Leider aber gibt es diese Klassen im Foundation-Fundus in dieser Form gar nicht eigenständig, sondern nur als zusammengesetzter Teil innerhalb eines mixins. Das Resultat war verblüffend: Die Seite verhielt sich so, wie sie sollte, das CSS schien in Ordnung zu sein. Erst der Absturz der Browser-Entwicklertools und ein Blick in das kompilierte CSS zeigten die Katastrophe: Eine schier unendliche Kaskade von verschachtelten Klassennamen, mit der ein Overhead von CSS erzeugt wurde, der auf mehrere zehntausend(!) unnötige Selektoren zurück ging.
Merke: immer prüfen, ob die Klasse, die mit SASS oder LESS über ein extend Teil des Website-CSS wird, in dieser Form auch extendable ist.
Das passte nicht mehr in den Artikel, hätte da aber auch nix zu suchen gehabt. Und jetzt ab zum Kiosk und die Screenguide erwerben. Oder direkt abonnieren.