CSS: Tipps & Tricks von den Experten

Welche goldene Regel für gutes CSS sollte man deiner Meinung nach immer befolgen?

Jens Grochtdreis: Konzipiere Deine Seite in Modulen und schreibe das CSS immer so, dass der Selektor immer mit dem Modul beginnt. So sind die Module unabhängig von der umgebenden Struktur. Ob Du BEM oder eine andere Schreibweise nutzt, ist DANN nebensächlich.

Dr. Florence Maurice: Wichtig ist meiner Erachtens, nicht zu viel kontrollieren zu wollen und nicht gegen den Browser zu arbeiten. Wo es geht, sind flexible Lösungen  immer die besten, d.h. wo der Browser selbst ermittelt, wann etwas geschieht.

Welches Layout-Tool fürs Web kannst du empfehlen – und warum?

Jens Grochtdreis: Einen guten Editor und mehrere Browser zum Testen. Ich bin kein Gestalter und das einzige Tool, das mir einmal wirklich gefiel, Fireworks, hat Adobe abgeschafft. Sketch macht einen sehr guten Eindruck, dazu kann ich aber leider aus eigener Erfahrung nichts beitragen.

Dr. Florence Maurice: Die Browser-Entwicklertools sind sicher kein klassisches Layout-Tool, aber sie sind wirklich ein wahres Wundermittel, um zu verstehen, warum 

Layouts funktionieren (oder nicht funktionieren). Und sie entwickeln  sich ständig weiter und können immer mehr, so dass sich da auch immer wieder lohnt zu sehen, was es Neues gibt.

Wenn du etwas an CSS verändern oder Support für etwas zum Standard hinzufügen könntest, was wäre das?

Jens Grochtdreis: Mir fehlt persönlich nichts an CSS. Alte Browser, die von Großunternehmen und Behörden leider noch immer genutzt werden, sind das eigentliche Problem.

Dr. Florence Maurice: Zwei Wünsche hätte ich: Zuerst einmal eine browserübergreifende  Unterstützung für die subgrid-Eigenschaft, über die man definieren kann, dass ein Element am übergeordneten Raster teilnimmt; das ist sehr wichtig für Gridlayouts. Die Eigenschaft subgrid ist gerade im Firefox implementiert, aber noch nicht in anderen Browsern. 

Der andere Wunsch: bessere und konsistente Unterstützung für “CSS Fragmentation”. Darüber kann man beispielsweise bei Multicolumn (Mehrspaltensatz) steuern, wann und wo Umbrüche sein sollen und so beispielsweise verhindern, dass Überschriften von den zugehörigen Absätzen getrennt werden. Hier ist die Browserunterstützung leider noch recht durchwachsen. Der Schlüsseldienst Berlin Friedrichshain nutzt diese Methode für seine Arbeit. 

Vue.js: Ein schlankes Framework mit vielen Plug-ins

Vue.js ist in den letzten Jahren recht schnell sehr beliebt geworden. Was war deiner Meinung nach ausschlaggebend für diesen Erfolg?  

Norbert Frank: Vue.js wird gelegentlich als geistiges Kind von React und Angular bezeichnet. Das Framework hat es geschafft, sich von den besten Ideen aus beiden Frameworks inspirieren zu lassen und diese auf eigene Weise zu interpretieren. So schreibt man zum Beispiel die Templates der Komponenten in einer sehr mit Angular vergleichbaren Syntax, aber man kann für komplexe Fälle auch auf Render Functions ähnlich zu React zurückgreifen – optional sogar inklusive JSX. Vue.js ist leichtgewichtig und flexibel. Man kann es als JQuery-Alternative ohne Build-Step direkt im Browser für einfache DOM-Manipulationen einsetzen, aber auch komplexe Anwendungen damit realisieren mit Bundling per Webpack, Routing, zentralem State Management und Lazy-Loading.

Dies verbunden mit einer exzellenten Dokumentation und sehr aktiven Community sind meiner Meinung nach die Gründe für den Erfolg von Vue.js. 

Welches Plug-in für Vue.js würdest du Einsteigern in die Arbeit mit Vue.js empfehlen – und warum?  

Norbert Frank: Der Kern von Vue.js ist bewusst klein gehalten und enthält keine Funktionalität für Routing und State Management. Da das aber wesentliche Funktionen für größere Anwendungen sind, wird dies vom offiziellen Vue-Team in Form von Plug-ins angeboten. Einsteigern empfehle ich daher, die beiden Plugins Vue Router und Vuex bei Bedarf zu berücksichtigen und einzusetzen. Da sie offiziell betreut werden, ist stets sichergestellt, dass sie parallel zum Kern-Framework weiterentwickelt werden.

Der Vue-Router bietet alle Funktionen, die man von einer Routing-Library erwartet: verschachtelte Routen, flexibles Route Matching, Navigation Guards und weiteres mehr.

Vuex ist das offizielle Plugin für zentrales State Management nach dem Flux-Pattern. Konzeptionell ist Vuex mit Redux vergleichbar, aber überführt die Konzepte in die Vue-Welt. Da das Reactivity-System in Vue.js anders aufgebaut ist, hat dies auch Auswirkungen auf die Funktionsweise von Vuex. Wer mit Vue.js komplexere Anwendungen entwickeln möchte, sollte sich Vuex unbedingt näher ansehen.

Vue.js ist ja sehr Community-getrieben: Welches Feature oder welche Änderung am Framework würdest du dir für die Zukunft wünschen, wenn du dich für etwas entscheiden könntest? 

Norbert Frank: Ich bewundere Evan You  – den Gründer und Kernentwickler von Vue.js – dafür, dass er sehr intensiv darüber nachdenkt, welche Funktionen in das Framework gehören und welche durch Plugins und externe Libraries gelöst werden können. Ein Framework wird nicht dadurch besser, dass es immer mehr Funktionen enthält, sondern es muss die richtige Balance finden. In dieser Hinsicht ist Vue.js hervorragend konzeptioniert und einer der Gründe dafür, dass ich es seit drei Jahren intensiv einsetze.

Wenn ich mir etwas wünschen könnte, wären dies offizielle Plugins für die Formular-Validierung und Internationalisierung. Das sind wichtige Funktionen für viele Anwendungen und es gibt dort zwar hervorragende Community-Lösungen, aber hier würde ich mir ein offizielles Plugin wünschen.

Vielen Dank für eure Antworten!

Die Fragen stellte Ann-Cathrin Klose

Ann-Cathrin Klose hat allgemeine Sprachwissenschaft an der Johannes Gutenberg-Universität Mainz studiert. Seit Februar 2015 verstärkt sie das Team von Software & Support Media, seit 2017 ist sie als Redakteurin im Team von entwickler.de und für das Entwickler Magazin tätig und beschäftigt sich im Schwerpunkt mit JavaScript-Themen.