Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor.
[00:00:12] News
- LESSCSS 1.5
- Totgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps!
Schaunotizen
- [00:00:40] CSS best practices
- Artikel über Cargo Cult CSS und eine Herangehensweise mit vielen Klassen laden zur Diskussion über CSS best practices ein. Wir sind nicht die einzigen, die beide postulierten Methoden etwas krass finden. Konventionen und Systeme schön und gut, aber SMACSS, BEM, OOCSS, und Konsorten scheinen uns in ihrer Gesamtheit (Stefan findet BEM zumindest in Teilen gut) dann doch Probleme lösen zu wollen, die mit CSS allein nicht zu bewältigen sind. Wir sind uns einig, dass sehr viele Probleme einfach aus der Welt zu schaffen wären, wenn man nur einen Präprozessor benutzen würde.
- [00:19:11] Introducing layout boundaries
- Der Summus Pontifex Ecclesiae Performansis erklärt, wie (nach den Informationen von Wilson Page) bestimmte CSS-Eigenschaften genutzt werden können, um die Auswirkungen von Reflows (layout thrashing) auf Teilbereiche der Webseite zu beschränken. Des weiteren regen wir uns darüber auf, dass es nur in Chrome (und neuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features erlauben und reden über die Performance-Sünder CSS-Gradients, Box-Shadow und Border-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram auszuschalten (z.B. per Präprozessor-Mixin) findet großen Anklang.
- [00:28:57] Batching image insertion
- Sie kennen das: sie wollen über 9000 Bildelemente mit Data-URLs einfügen und plötzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit fastdom eine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen lässt. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schwören drauf.
- [00:47:59] Hörerfrage: Wie geht ihr vor, wenn ihr ohne Designer arbeiten müsst/dürft?
- Peter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und natürlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor allem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein bisschen über Transitions und Hover-States (die manch ein Designer gern vergisst), Browserdesign versus Photoshop, Flash und Hitler.
[00:50:08] Glücksrad
- Das img-Element
- Zum
img-Element fällt uns nicht viel Intelligentes oder gar spannendes ein und so reden wir stattdessen über den Coolness-Faktor von Image Maps. Das crossorigin-Attribut klingt zwar interessant, aber so richtig viel Plan haben wir davon auch nicht. Mehr Plan und Verwendung hätten wir da schon von und für dielazyloadundpostpone-Attribute aus der Resource-Priorities-Spec, deren flächendeckende Unterstützung allerdings noch auf sich warten lässt.
[00:56:28] Keine Schaunotizen
- Snap.svg und BonsaiJS
- SVG-Grafiklibraries.
- 1. Kasseler Web Montag
- 18. November, 19:00 Uhr.
- Automating Front-end Workflow
- Episches Slide Deck von Addy Osmani.
- localtunnel
- Schnell eine Web-URL für ein lokales Projekt anlegen.
Kommentare
Marius alias Acconut #
Geschrieben am 2.11.2013 um 16:29
Wie es scheint ist localtunnel.me seit der Aufnahme nicht mehr erreichbar. Vielleicht ändert sich das, vielleicht auch nicht.
Als Alternative gibt’s eine Ruby oder Python-Version (ich weiß es nicht genau):
progrium.com/localtunnel/
github.com/progrium/localtunnel
Stefan #
Geschrieben am 3.11.2013 um 12:56
Danke für den Hinweis! Hatte grad wieder Bedarf danach ;-)
Christoph Rumpel #
Geschrieben am 4.11.2013 um 23:51
Nette Revision!
Wenn es um CSS Namens-Konventionen geht und allem was dazu gehört, drehen wir uns meiner Meinung nach nur im Kreis. Nach dem Hype von dem einem Konzept kommen wieder ein paar Artikel dagegen über die plötzlich alle reden und plötzlich wird wieder alles in Frage gestellt :-)
Im Prinzip ist es eh nur wichtig, dass man sich selbst bzw. das Team sich auskennt und die Arbeit erleichtert wird. Wie man das dann macht sei jedem bzw. dem Team selbst überlassen.
Ich persönliche bevorzuge aber auch, ähnlich wieder Stefan, eine Mischung aus SMACSS und BEM. BEM ist extrem übersichtlich im Markup und mit der Aufteilung von SMACSS wird man gezwungen sich schon früher mehr Gedanken über die Elemente zu machen. Außerdem kommen IMMER noch Änderungen im Design und später Erweiterungen bei denen es praktisch ist wenn nicht die ganze Seite zusammenfällt wenn man etwas ändert ;-)
Zum Thema Rendering und Paint-Issues ist auch dieser Talk von Addy Osmani sehr spannend: http://vimeo.com/75540354
Anhand von Pinterest erklärt er auftretenden Probleme und stellt Lösungen parat.
lg
Schepp #
Geschrieben am 5.11.2013 um 11:05
Ich sehe es genau wie Du: Hauptsache, man einigt sich irgendwie. Auf was ist fast schon egal. Addys Talk muss ich mir nochmal anschauen, danke für den Tipp!
Paul #
Geschrieben am 13.11.2013 um 14:40
Hi Leute,
wie immer ein hörenswerter Podcast, aber ich muss mich auch noch Mal zum Thema „Klassenstruktur“ einklinken. Ich weiß gerade nicht wer die Person mit „Österreich“-Akzent ist aber er hat mehrmals betont dass alles in Klassen auszulagern ist wie wenn man alles in das Style-Attribut schreibt. Anfangs kann einem dieser Gedanken kommen, aber es ist in keinem Fall vergleichbar: Was passiert zum Beispiel wenn ich den Wert einer Eigenschaft ändern will? Ist alles in einer Klasse kann ich die Änderung nach wie vor an genau einer Stelle vornehmen, habe ich alles mehrfach dupliziert in verschiedenen Styleattributen geht das nicht mehr. Von daher ist dieser Vergleich in meinen Augen ungültig und läuft am Thema ein bisschen vorbei. Ich kann nachvollziehen das eine Klasse „m10“ für einen 10px Außenabstand wenig Sinn macht, wohingegen eine Klasse „spacing–bottom“ oÄ durchaus Sinn machen kann.
RSS-Feed zu diesem Beitrag
Kommentare sind für diesen Beitrag geschlossen.