Modernes CSS: Was kommt nach BEM?

Eine Einführung in Utility Frameworks
Kim-Christian Meyer @greatestview am 09. März 2018
#devcamp18

Two css properties walk into a bar. A barstool in a completely different bar falls over. - @thomasfuchs

Exkursion 1: Bloated CSS

Wer mag große Projekte mit großer Frontend-Code-Basis, die schon durch mehrere Hände gegangen ist?

Kind fällt Holz ins Gesicht

Exkursion 1: Bloated CSS

→ Der erste Instinkt ist es, neues CSS zu schreiben.

Exkursion 1: Bloated CSS

Probleme bei Multi-Personen-Projekten

Exkursion 1: Bloated CSS

Beispiele

Exkursion 2: Separation of Concerns ist ein Arschloch

→ »Separation of Concerns« funktioniert nicht bei HTML und CSS

Es gibt zwei Tode, die man sterben kann

  1. Das CSS ist abhängig vom HTML → HTML ist restylable, CSS ist nicht reusable (z. B. CSS Zen Garden)
  2. Das HTML ist abhängig vom CSS → HTML ist nicht restylable, CSS ist reusable (z. B. Bootstrap)

Der steinige Weg der Erkenntnis

Mehrfaches Refactoring bei Chat von gestern Nacht:
Einige Elemente im klassischen BEM-CSS wiederholten sich immer und immer wieder.

Beispiele

Der steinige Weg der Erkenntnis

Lösung:

Helper-Klassen!

Effekt

Aber: Far from perfect.

Finally: Utility Classes

Beispiel

Achtung: Wirkt auf den ersten Blick ungewohnt!

Vorteile von Utility Classes

Nachteile von Utility Classes

Fazit

The real way to scale css,
is to stop writing css.

Adam Morse