Dev-Blog

Entwicklungsblog von ZEIT ONLINE

Block, Element, Modifier

Von 20. Januar 2015 um 10:26 Uhr

Das Schwierige an CSS ist, dass es so einfach ist. Obschon leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, wächst die Codemenge oft exponentiell zur Projektlänge an.

In Just Try and Do a Good Job schreibt Chris Coyier, dass er weder Namenskonventionen noch andere spezielle Methodiken nutzt, um sein CSS zu schreiben. Vielmehr versucht er mithilfe seiner Erfahrung und weniger Richtlinien, immer gute Arbeit (a good job) zu machen. Er schränkt dabei ein, dass er hauptsächlich alleine arbeitet und so seinen Stil leicht einhalten kann. Für Teams reicht die Arbeitsanweisung »Do a good job« selten aus. Zumal oft unterschiedliche Vorstellungen davon herrschen, was genau das denn bedeutet, trotz Coding Richtlinien.

Das Entwicklungsteam von ZEIT ONLINE hat hier viele, oft schmerzliche Erfahrungen gesammelt. Zu Zeiten des Relaunch 2009 hatten wir für uns einen CSS-Schreibstil entwickelt, der unseren damaligen Arbeitsumständen sehr entgegen kam und am damaligen state of the art orientiert war. Leider wissen wir heute, dass wir damit CSS gebaut haben, das zwar gut funktioniert, aber sehr schwierig zu warten ist. Die Weiterentwicklung der Seite führt zu immer mehr Code. Da nie ganz klar ist, welcher Code wo noch in Gebrauch ist, ist es gefährlich, eigentlich überflüssigen Code zu entfernen. Der sogenannte code bloat kann die Website-Performance aber schnell verschlechtern. Wir haben natürlich immer wieder an dem Problem gearbeitet, aber die gewünschten Performance-Werte letztlich nie erreichen können – oder auch nur unsere Entwickler besonders entlasten.

Aus diesem Grund haben wir uns für die Einführung der sehr rigiden Namenskonvention BEM entschieden. BEM steht für Block, Element, Modifier, was schon die drei Entitäten beschreibt, in die wir unseren CSS-Code in Zukunft unterteilen. Blöcke sind unabhängige Einheiten in einer Website, die für sich allein stehen können und einen Teil der Nutzeroberfläche repräsentieren. Dies kann beispielsweise ein Logo, ein Suchformular oder ein Menü sein. Blöcke können weitere Blöcke enthalten, was sie von den Elementen unterscheidet. Diese sind für sich allein gestellt nutzlos, funktionieren nur in ihrem Block. Zu guter Letzt gibt es noch Modifikatoren. Das sind zusätzliche Klassen, die an Blöcke oder Elemente geschrieben werden, um unterschiedliche Status abzubilden. Alle Blöcke, Elemente und die Modifikatoren werden durch Klassen repräsentiert, die per Benennung grob ihre Aufgabe und genau ihre Beziehung zueinander ausdrücken. Im Stylesheet wird ausschließlich mit diesen Klassen gearbeitet, alle anderen Selektoren sind quasi verboten.

The one “rule”ish thing I really believe in: keep your selector specificities fairly low and flat across your whole project. — Chris Coyier

Die Namenskonvention mit den doppelten Unterstrichen oder Minuszeichen – die man durchaus nach seinen Vorstellungen ändern kann – und das zweifelsohne hohe Aufkommen an Klassen-Attributen im HTML wirken zunächst etwas ungewöhnlich. Die einzelnen Blöcke werden dadurch voneinander völlig unabhängig. Sie können leicht und sicher editiert werden. Die Spezifität aller Elemente ist auf zwei Stufen festgezurrt, die Kaskade damit außer Kraft gesetzt. Aber gerade das hilft; vor allem in den ganz großen Projekten, in denen nicht mehr jeder jeden Codeblock kennt. Was also zunächst nach zusätzlicher Arbeit aussieht, kommt der Realität der Entwicklung und vor allem der Weiterentwicklung einer Nachrichtenseite sehr entgegen. Ziel ist es letztendlich, Code zu schreiben, der gut und sicher zu modifizieren ist. Diese Anforderung ist durch die vollständige Modularisierung und die flache Hierarchie der Klassen in BEM erfüllt.

Den Aufwand, den der Einsatz einer solchen Namenskonvention mit sich bringt, fangen wir durch Tools wie Sass (siehe auch BEM-Notation) oder grunt zumindest zum Teil wieder ab. In der Automatisierung liegt dann auch die Möglichkeit, den Code laufend zu prüfen und zu messen. Und nur wer misst, kann seine Performance erhöhen.

Nico Brünjes ist Teamleiter Frontend bei ZEIT ONLINE.

Kategorien: Entwicklung

Lieber authentisch als perfekt

Von 20. November 2014 um 11:04 Uhr

Das Licht ist gedämpft, ein DJ spielt Lounge-Musik. Menschen, vorwiegend Männer in Hipsterkluft, stehen murmelnd in Gruppen beisammen und halten sich an ihren Getränken fest. Eine aufsteigende Tribüne nimmt den großen Saal im Berliner Admiralspalast fast komplett ein, vorne auf der Leinwand grüßt ein Abbild des Organisators als Comicfigur. Alles erinnert ein wenig an Kino.
Doch die Getränke sind nicht alkohol- sondern koffeinhaltig, es ist 10 Uhr morgens und die Besucher sind nicht nur zum Vergnügen da. Es geht um die Optimierung von Code. Es ist der erste Tag der Beyond Tellerrand, einer Konferenz für Webdesigner und -entwickler.

btfconf-ct

Infostand der c’t auf der Beyond Tellerrand

Allerdings ist der erste Vortrag des Tages doch vergnüglich. Alles was man braucht, um die Sache spannend zu machen, sind einige Laser, beziehungsweise einige Laser mehr. Mit diesen realisiert der Brite Seb Lee-Delisle eindrucksvolle Spiel- und Klangexperimente. Das genügt vollkommen, um das Publikum nicht direkt nach dem Kaffee zur Club Mate greifen zu lassen.

Das, was Lee-Delisle vorstellt, ist bunt, schrill und sehr unterhaltsam, um so erstaunlicher das Ende des Vortrages. Dort fallen plötzlich Sätze wie “There is no such thing as natural talent” und “there is always someone better than you”. Zum Rest des Vortrags, der unerschöpfliche Kreativität wie die einfachste Sache der Welt wirken ließ, passt das nur bedingt. Es macht nachdenklich, dass jemand, der Kunstprojekte programmiert und sich jenseits der ausgetretenen Programmierpfade bewegt, den Druck der Branche dennoch zu empfinden scheint.

Die Webbranche, in der Lee-Delisle und höchstwahrscheinlich die Mehrzahl der anwesenden Besucher agiert, ist anspruchsvoll. Oft sind Dinge, die man neu dazugelernt hat, zu dem Zeitpunkt, an dem man sie richtig versteht, schon wieder veraltet. So veraltet, dass man sich fast nicht einmal mehr zuzugeben traut, sie je gelernt zu haben. Solche einst gehypten und nun totgesagten Technologien gibt es viele. Ein Beispiel dafür ist Flash, eine Technik, die Webseiten einst im großen Stil zum Blinken und Klingen und damit das Multimediaerlebnis ins vorher überwiegend dröge Internet gebracht hat. Mittlerweile hat es etwas Anrüchiges, Flash als ernsthafte Option für eine Webseite auch nur in Erwägung zu ziehen. Inzwischen gibt es weit bessere und einfachere Möglichkeiten für beeindruckende Webeffekte, ob sie nun notwendig sind oder nicht.

Etwas verschämt gibt es auch in einem Vortrag auf der Beyond Tellerrand Anspielungen auf diese ehemaligen Flash-Entwickler, von denen einige unter den Zuschauern sein dürften. Der Rest hat das Glück gehabt, einmal etwas mit gutem Gewissen ausgesessen zu haben.

Zu entscheiden, wann man sich den Luxus des Aussitzens gönnen kann, ist allerdings nicht leicht. Dies wird in der Konferenzpause deutlich, in der im Vorraum die Getränkebecher aufgefüllt werden können.  Nur wenig offen zur Schau gestelltes Unwissen ist zu hören. Die Frage: “Wie, das kennst du etwa nicht?” scheint hier so gefürchtet zu sein wie Alkoholknappheit auf der Firmenweihnachtsfeier. Zu Recht, denn man will einem Gegenüber, der eine solche Frage genüsslich stellt, keine Genugtuung gönnen.

Zum Glück folgt der nächste Vortrag, gehalten von der US-amerikanischen Webdesignerin Zoe Mickley Gillenwaters. Er trägt den Titel CSS lessons learned the hard way in dem sie ausführlich über Fehler bei ihrer Arbeit mit der Stylingsprache CSS berichtet. Gillenwaters weist darauf hin, wie wichtig diese Fehler für ihr Fortkommen waren, und macht deutlich, wie wichtig es sein kann, Fragen zu stellen. Auch dann, wenn damit vielleicht Wissenslücken eingestanden werden.

Auch Art Director und Grafikdesigner Andrew Clarke versucht, dem Publikum mehr Selbstvertrauen zu raten. Clarke liegt etwas über dem Altersdurchschnitt der Twenty bis Thirtysomethings und zitiert auf seinen Folien George Orwell, aber auch sich selbst. Was beim Hörer hängenbleibt, ist sein Appell, weniger in Trends und Schablonen zu denken – mehr Authentizität statt mehr Perfektionismus. Clarke ist einer der Initiatoren der Geek Mental Help Week, einer durch Beiträge verschiedener Autoren gestützten Webaktion, die sich kürzlich mit psychischen Problemen von Entwicklern und Designern auseinandersetzte.

Es ist ein Bewusstsein für den Leistungsdruck in der Webbranche entstanden – dieser Eindruck entsteht bei der Konferenz. Entwickler und Designer sind des “schneller, höher, weiter” der digitalen Revolution müde geworden.
Den letzten Vortrag mit dem  schlichten Titel Design and Happiness hält Stefan Sagemeister. Am Ende singt der gesamte Saal die Ode an die Freude.

Anika Szuppa ist Frontendentwicklerin bei ZEIT ONLINE.

Kategorien: Entwicklung

ZEITMASCHINE – responsive Such-App fürs Archiv

Von 7. November 2013 um 09:21 Uhr

Mithilfe der ZEIT ONLINE Api entwickelte Mathias Kotowski für die Firma Neofonie die Anwendung ZEITMASCHINE.

Die Anwendung ermöglicht gezielte Suchabfragen auf den umfangreichen Textbestand des Archivs von ZEIT und ZEIT ONLINE. Die Treffervisualisierung erfolgt auf einem Zeitstrahl, dessen Skala individuell eingestellt werden kann. Die App ist responsiv und touchoptimiert, sie kann somit auf unterschiedlichsten Endgeräten genutzt werden. Suchergebnisse können lokal im Browser abgespeichert werden.

Screenshot App Zeitmaschine

Facts:

Kategorien: Anwendung, API