MoreCSS pimpt CSS per JavaScript

Das yellowgreen designbüro aus Hannover hat eine kleine, aber feine JavaScript-Bibliothek herausgebracht, die einen etwas anderen Ansatz hat als die meisten prototype- oder jQuery-orientierten Frameworks da draußen.

MoreCSS ist als Erweiterung für CSS gedacht und bedient sich logischerweise auch exakt der CSS-Syntax, nur dass eben noch nie dagewesene Selektoren und Attribute erfunden wurden, die die vielen kleinen Dinge in der Frontend-Entwicklung einfacher machen sollen.

Es wird zum einen ein JavaScript-File eingebunden, und zusätzlich eine CSS-Datei, die jedoch natürlich keine echte CSS-Datei ist, sondern ausschließlich von MoreCSS geparst und weiterverarbeitet wird.

Ich finde: Eine clevere Sache!

15 Kommentare

macx

Seit wann ist CSS schwer? Das schreib ich im Schlaf runter. MoreCSS ist in meinen Augen totaler Unfug.

Gerrit

MoreCSS ist ja auch nicht gedacht, um CSS einfacher zu machen, sondern um JavaScript-Funktionen in echter CSS-Syntax schreiben zu können. Eben weil CSS-Syntax einfach ist!

macx

Das ist noch viel schlimmer! Die Leute sollen mal lernen alles schön sauber zu trennen. Also kein HTML-Output in php, kein Inline-CSS, und Inline-JS (onclick, usw) in HTML und bitte (nun) auch kein JS in CSS!
Da dreht sich mir echt der Magen um. ;-)

Dirk

Ich kann mich da David nur anschließen, so richtig sehe ich keinen Sinn in dieser Bibliothek. jQuery ist – mit nur wenigen Bytes mehr – deutlich vielseitiger nutzbar als nur für ein paar Effekte, bietet eine erschöpfende Vielfalt an Selektoren und lässt dem Nutzer volle Kontrolle.

Zum zweiten mag ich diese Art Mogelpackung mit dem Pseudo.CSS-File nicht. Wo CSS drauf steht, sollte auch CSS drin sein.

Mindfucker

macx, du hast das nicht verstanden. Da kommt kein JS in CSS rein, sondern JS wird in Form von CSS geschrieben, was dann geparst wird.
Aber ein Validator würde da doch ne menge CSS-Fehler anzeigen, wenn man das einfach so in die HTML-Datei einbindet…

macx

@Mindfucker. Wenn ich Nicht-CSS-Elemente in CSS nutze, das mit JS geparsed wird, dann ist das für mich Javascript in CSS und damit auch etwas, was da nicht reingehört.
CSS ist zum gestalten da, und nicht für Funktionen.

Andreas Diner

Also jetzt versteh ich überhaupt nicht mehr wie MoreCSS funktioniert. Da muss Gerrit wohl noch ein ein paar Wochen, wenn er mit dem neuen Blog-Design fertig ist, noch einen kleine Aufklärungsartikel zu schreiben :-).

Nicolas

@Dirk: jQuery ist bedeutend größer, da sich die Angabe auf eine GZIP gepackte Version bezieht. Mit GZIP wäre MoreCSS z.B. nur 6 kB. Effekte bietet MoreCSS übrigens bewusst nicht und deshalb ist es auch keine Konkurrenz zu jQuery. Es sind JS-Funktionen, wie man sie sich auch als Eigenschaften in CSS vorstellen könnte. Und mit der CSS-Syntax wird es einfacher, diese zu verwenden.

@Mindf***er: Hast Du CSS-Fehler entdeckt? Wenn ja, raus mit der Sprache, damit ich das beheben kann.

Kurz zum besseren Verständnis: MoreCSS war mal eine Sammlung an JS-Funktionen, die ich häufiger im Einsatz hatte. Um diese einfacher und vor allem produktiver einsetzen zu können, habe ich die CSS-Syntax eingebaut, mit der die Funktionen angewendet werden können. Mehr ist es im Grunde nicht ;-)

molily

Unter der Haube ist das eher mäßig umgesetzt, kein Namespacing, überflüssige eval() usw.

Aber ich finde die Idee, Behaviour-Regeln so zu notieren, ziemlich genial und gar nicht weit hergeholt. Andere etablierte Bibliotheken funktionieren ähnlich, nur nutzen sie direkt JavaScript-Syntax. Vom Aufbau her wird Verhaltens-Logik aber ähnlich notiert. Wenn ich einmal einen Grundstock an Behaviours gebaut habe, ist es vielleicht gar nicht verkehrt, einen Abstraktionslayer einzuführen und die Logik in einem solchen Format zu definieren.

Soweit ich das sehe, sind diese Regeln vom CSS gänzlich getrennt und die Bibliothek geht auch keinesfalls davon aus, dass eine Vermischung stattfindet. Deshalb führt die Diskussion hier eher von der Sache weg und speist sich aus Missverständnissen. Von CSS wird hier bloß die Syntax (!) entlehnt, um Elementen Eigenschaften, in dem Fall Verhalten zuzuweisen. Für die Idee ist es doch unwichtig, ob das nun wie CSS aussieht oder nicht. Was ist denn daran das Problem?

Nicolas

@molily: Danke für die Kritik! Es ist noch recht einfach umgesetzt, dafür gewissenhaft und akribisch mit Firebug & Co. auf Fehlerfreiheit geprüft. Optimierungsarbeiten stehen dann in den nächsten Versionen an, inklusive Namespacing und dem ganzen Kram.

Tim Tepaße

Vor zwei Jahren gab’s einen ähnlichen Ansatz mit Behaviour von Ben Nolan. Persönlich liegt mir dieser Ansatz mehr; Selektoren zum Selektieren zu nutzen und JS direkt zu notieren, meinetwegen als Funktionen oder als spezielle-Behavior-Objekte. DSLs sind zwar nett zu lesen (siehe auch Event.Behavior); irgendwann läuft man aber Gefahr, sich wegen der Abstraktion von der Grundlage soweit zu entfernen, dass ein einfaches Erweitern eine hohe Lernkurve erfordert.

Wobei Nicolas ja schon jetzt im Prinzip eine relativ einfache Plugin-API hat, einfaches Registrieren von Property mit Funktion, die dann bei Bedarf auf weitere Funktionen zugreift. Fehlt nur noch ein Schnittstellchen, das man an das Namespace-Objekt andockt. Ich mag da den jQuery-Ansatz.

Andre

Also ich muss sagen, dass ich bisher mit CSS immer ganz gut klar gekommen bin! Weiß auch nicht ob die Bibliothek zwingend erforderlich sein wird! Ich werde auf jeden Fall erstmal noch den nächsten Monat abwarten, da tut sich bestimmt noch was!

Dirk

@Nicolas
Ich finde die die Verwendung der CSS-Syntax an einigen Stellen einfach unglücklich, beispielsweise bei der Einbindung von Dateien:

body { include-file: »example.css«;
}

Ich habe hier als Nutzer keine Kontrolle an welcher Stelle im Header die Datei eingebunden wird und mit dem Selektor body hat es nun gar nichts zu tun. Die Formulierung in der CSS-Syntax finde ich hier nicht passend.

Dass mit MoreCSS hier eine sehr einfach lesbare – weil vertraute – Schreibweise verwendet wird, habe ich schon verstanden. Nur für den Abstraktionslayer für Behaviors ist mir dann noch das reine JavaScript lieber. Und bei Dingen wie …

table tr { second-elements-class: colorTable;
}

… ist mir die Schreibweise $(›table tr:even‹).addClass(›meineKlasse‹); die logischere. Auch wenn die Syntax etwas komplexer als CSS ist.

Nicolas

@Dirk: include-file ist sicherlich etwas verwirrend in Sinn und Anwendung. Eigentlich ist es aber nur die Ausführung einer internen Funktion, um mit einer geplanten Plugin-Schnittstelle externe Dateien einfacher laden zu können. Ist aber so oder so nicht sehr praktikabel und wird wohl bald rausfliegen. Danke auf jeden Fall für das Feedback.

Harald

Den Namen moreCSS finde ich etwas daneben. Klar, es wird ein Syntax verwendet, der sich an CSS anlehnt. Darum ist es noch lange kein CSS.

Grundsätzlich finde ich die Idee aber gut, die Notation zu von Javascript in dieser Form zu vereinfachen und auf einen bekannten Syntax aufzusetzen.

Kommentar verfassen