Schnellere Webentwicklung mit MarkerCSS?

Mit all den notwendigen Browser-Workarounds, und der generellen Schreibwütigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele Bestrebungen in die Richtung zur Optimierung der CSS-Erstellung. Egal ob wir hier von Grid-Systemen, Reset-CSS oder ähnlichen Konstrukten sprechen.

MarkerCSS schreibt sich hierbei auf die Fahne, die Css-Entwicklung „zu revolutionieren“. Naja, ein müdes Lächeln später stellt man fest, das die Revolution sehr komisch ausfällt :) Aber zunächst einmal ein Beispiel. So sieht es ohne MarkerCSS aus:

.container01 {
    position:relative;
    float:left;
    width:500px;
    height:700px;
    }
 
.container02 {
    position:relative;
    float:left;
    width:50px;
    height:70px;
    }
 
 
<div class=”container01”>
    <div class=”container02”></div>
</div>

Mit MarkerCSS wird daraus dann:

<div class=”rl w500 h700”>
    <div class=”rl w50 h70”></div>
</div>

Sieht wirklich weniger aus, oder? Aber ein kleiner Blick hinter die Kulissen lässt sofort erkennen, dass es sich bei MarkerCSS um ein weiteres Framework handelt, das durch eine CSS glänzt, die eingebunden werden muss. So weit, so gut: Die gute Nachricht es funktioniert, die schlechte ist: 30kb unoptimiertes CSS in 8 Dateien!

Screenshot der MarkerCSS-Homepage

Stellt sich natürlich die Frage on ich einen wirklichen Nutzen davon trage, da ich ohne selbst noch einmal Hand anzulegen sowohl bei Page Speed als auch bei YSlow mit dem Framework erstmal durchfalle. Darüber hinaus stört mich, dass wirklich alle möglichen Fälle in dem CSS abgedeckt sind. H70 wird als eine „Höhe von 70“ interpretiert, gefühlte 100 CSS-Klassen weiter merkt man, das in MarkerCSS wirklich alle Höhen abgedeckt werden!

Zugutehalten muss man dem Framework, das es wirklich einfach einsetzbar ist, aber ohne entsprechende Optimierungen sollte man es meines Erachtens nicht online setzen. Trotzdem kann es für den einen oder anderen von euch eine nette Alternative zu den üblichen Frameworks sein.

Ähnliche Beiträge

CSS Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
Autocomplete bei Input-Feldern abschalten Das am meisten ignorierte Attribut im Web-Umfeld lautet wohl autocomplete.  Dabei ist der kleine Helfer äußerst sinnvoll, suggeriert es doch dem DAU, ...
Der Unterschied zwischen :nth-child und :nth-of-ty... Ich hab hier mal wieder ein CSS eines Kollegen zwischen das von dem Bemühen zeugt, innovative Lösungen zu nicht existierenden Problemen zu finden (ist...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...

4 Kommentare

  • Das widerspricht in meinen Augen dem Konzept das Layout vom Code zu trennen. Denn mit w400 schreibe ich ja doch direkt ins Html wie breit der Container sein soll. Bei Änderungen muss dann zwangsläufig das HTML angepackt werden.

    Zusätzlich muss jeder Besucher weit mehr Ressourcen laden, als notwendig. Ich finde, dass das selbst in Zeiten von DSL Webmastern nicht egal sein sollte.

  • Naja, ein Framework eben. Wenn man sich darauf einlässt, kann man nach etwas Eingewöhnungszeit sicherlich ganz gut damit arbeiten. Es gibt ja eine ganze Reihe an CSS-Frameworks, doch kam für mich persönlich noch nichts an YAML heran.
    Und wenn man bei MarkerCSS wirklich jede CSS-Eigenschaft mit einer eigenen Klasse versehen möchte, dann halte ich den Code nicht wirklich für überschaubar.

    Mein Fazit: Nichts für mich!

Schreibe einen Kommentar