CSS im fortgeschrittenen Stadium

von Nicolai Schwarz | Screenguide #24, Editorial

Es gab mal eine Zeit, da hat uns CSS gereicht. Drei Buchstaben für „Cascading Style Sheets”, um damit HTML-Elemente zu gestalten. Schön einfach. Dann haben wir uns an LESS, SASS und SCSS gewöhnt. Nicht mehr ganz so einfach, aber außerordentlich nützlich. In letzter Zeit ist immer häufiger von OOCSS, BEM, SCASS oder ACSS die Rede. Vier Konzepte für Fortgeschrittene. Und trotzdem drehen sich all die Abkürzungen immer noch „nur” um CSS.

 

„CSS ist einfach!” – mit der Behauptung können Sie leicht ein kleines Streitgespräch unter Webworkern starten. Eben mal eine Farbe oder einen Abstand ändern, ein Element fixieren? Das ist so einfach, dass es in einer kurzen Zeile im Handumdrehen gemacht ist. Da hören Sie bei der Besprechung schnell ein „Das mache ich eben”. Und wenn Sie nicht aufpassen, wissen Sie nicht einmal, wer das nun gesagt hat. Der Satz kann problemlos vom Designer, vom JavaScript-Programmierer, vom PHPler oder vom Frontend-Entwickler kommen. Das hat jeder schnell gemacht, denn es ist ja nur CSS. Einfach.

So einfach ist es aber vielleicht doch nicht, wenn der Frontend-Entwickler das Ergebnis all der vielen kleinen Änderungen in Augenschein nimmt und fast vom Stuhl kippt. Sobald es nicht mehr um kleine Projekte geht, sondern der CSS-Code mehrere Hundert Selektoren umfasst, häufen sich schnell viele ineffiziente Anweisungen. Selektoren überschreiben sich ständig gegenseitig. Klassennamen vom CMS, vom neuen PHP-Modul und von einigen JavaScript-Spielereien sind nicht aufeinander abgestimmt. Und manch einer neigt dazu, ganz viele Selektoren aneinanderzureihen, um sicherzugehen, dass er nur eine ganz bestimmte Stelle ändert, aber gleichzeitig nicht andere Bausteine auf der Website stört. Das alles wird nicht besser, wenn Sie auch noch SCSS oder LESS einsetzen und sich die verschiedenen Personen unterschiedlich gut damit auskennen. Der eine nutzt fleißig Mix-ins, während der andere normales CSS in die SCSS-Dateien schreibt. Am Ende entsteht eine ineffiziente CSS-Pampe, die der Frontend-Entwickler vorzugsweise noch einmal ganz neu schreiben möchte.

Wer im Team an CSS arbeitet, muss sich also auf ein paar Regeln einigen – genauso wie es in PHP und JavaScript auch nötig ist. Das beginnt damit, wie das CSS geschrieben wird (mehrere Zeilen, Reihenfolge der Eigenschaften). Oder wie die Eigenschaften auf verschiedene SCSS-Dateien aufgeteilt werden. In den letzten Jahren haben aber auch einige Empfehlungen die Runde gemacht, mit denen Sie HTML und CSS grundsätzlich besser organisieren können. Matthias Mees erklärt Ihnen ab Seite 60, was hinter Konzepten wie OOCSS, BEM, SMACSS oder ACSS steckt. Und Olaf Gleba zeigt Ihnen im Anschluss ab Seite 70, wie Sie diese auch praktisch in einem Projekt einsetzen können.

Neben der umfangreichen Lektüre über CSS-Strukturen finden Sie im Heft auch entspanntere Themen. Der Artikel über Audio-Hacks mit JavaScript lädt Sie dazu ein, selbst Bytebeat-Musik zu produzieren. Das Zentrum für Kunst und Medientechnologie (ZKM) stellt Kunst im Browser vor. Außerdem können Sie spannende und kuriose Ideen rund um Foursquare oder Inspirationen für Ihre eigene Firmenwebsite entdecken. Dafür müssen Sie nur umblättern. Zumindest das ist ganz einfach.

„Easy peasy, lemon squeezy!”

Nicolai Schwarz

Nicolai Schwarz 

Nicolai Schwarz

kümmert sich am liebsten um guten Content. So auch bei der Screenguide. Wenn er dort nicht gerade Inhalte auf Herz und Nieren prüft, arbeitet er als selbstständiger Designer und Webentwickler, hauptsächlich in Drupal-Projekten.

Twitter: @textformer

Neuen Kommentar schreiben