Mit Stylus Webseiten Stylen

Posted by in CSS, Nodejs, Präprozessor

Wer mein Nodejs-Tutorial aufmerksam gelesen hat (Wer nicht kann das gerne nachholen 😉 ) hat sich sicher schon gefragt, ob ich das so lassen will von der Optik her. Natürlich nicht! Das CSS zu erstellen hätte nur völlig den Rahmen gesprengt. Deswegen hole ich das mit diesem Beitrag nach.

Für die CSS-Erstellung sind heutzutage Präprozessoren voll im Trend. Neben Sass, Less und noch ein paar weiteren unbekannteren Vertretern, hat sich für Nodejs Stylus als Quasi-Standard etabliert. Deswegen werde ich auf die ersten Schritte, die mit man so mit Stylus macht eingehen.

Von rudimentär zu annehmbar

Die Loginseite sieht im Moment naja, sagen wir mal funktional aus:

loginseite_vor_styling
image-260

Am Ende wird sie zwar nicht unbedingt mega stylisch sein, aber doch annehmbar. Ich bin ja schließlich kein Grafiker.

loginseite_nach_styling
image-261

Stylus in app.js einbinden

Um Stylus zu verwenden, braucht man es nur in seiner app.js einbinden (und vorher über die package.json installieren!). Dies unbedingt VOR der Anweisung

damit immer die neu kompilierte CSS-Datei angezeigt wird und nicht die Erste die jemals kompiliert wurde.

Das Template

Unser Template besteht aus einer Überschrift mit einem einfachen Loginformular und wird unter views/login.jade abgelegt:

styl Datei

Stylus sucht nach einer Datei mit dem Namen style.styl im Ordner public/stylesheets die bei jedem Aufruf einer Seite auf unserer Applikation zu einer style.css transformiert wird. Das ist zwar ineffizient, aber für die Entwicklung sehr nützlich, da jede Änderung sofort übernommen wird, wenn man die Seite neulädt.

Kommen wir zum eigentlichen Inhalt der style.styl. Im ersten Schritt binde ich eine Google-Schriftart ein und weise sie dem body-Element zu. Der Einfachheit halber mache ich das nur über die URL.

Die Syntax von Stylus kommt ganz ohne Klammern und Strichpunkte aus, wenn man das so will. Man kann aber auch ganz normales CSS schreiben. So fällt die Migration von bestehendem Stylesheets erheblich leichter. Wichtig ist es aber auf die Einrückung zu achten, denn genau daran erkennt Stylus welche Eigenschaften zu welchem Selektor gehören.

Der nächste Abschnitt kümmert sich um grundlegendes Styling der Loginseite. Da ich CSS3-Placeholder verwende müssen diese leider mit Vendor-Prefixes gestylt werden. Da ich nur den Chrome verwende, gibt es in meinem Beispiel nur das webkit-Präfix. Für Stylus gibt es spezielle Add-Ons die sich um solche Details wie Cross-Browser-Kompatibilität kümmern. Außerdem gibt auch schon die erste geschachtelte Anweisung mit &:hover für submit-Buttons

Die Regeln für das Formular zeigen klar die Stärken eines Präprozessors. Er bildet die Struktur des HTML im Idealfall 1:1 ab. So werden Labels, Inputfelder und der Submit-Button in Formularen zusätzliche Regeln zugewiesen bzw. vorhandene überschrieben. Normales CSS hätte hier 4 Regeln gebraucht, die untereinander ohne semantisch erkennbaren Bezug gestanden hätten.

Fazit

Mit Stylus haben wir einen leicht verständlichen Präprozessor für CSS der eine moderne Syntax ohne Schnörkel aufweist. Die Einbindung zu Testzwecken ist sehr einfach, aber nicht für den Produktivbetrieb geeignet. Man sollte sich am Ende der Entwicklung die fertige CSS Datei erstellen und dann einbinden. Wie man das am Besten macht, werde ich ein Andernmal schreiben.