Durch meine Arbeit mit Material Design Lite bin ich über das opulente CSS Klassen Konzept gestolpert. Es ist ziemlich aufwändig die CSS Klassen zu tippen und Visual Studio Intellisense kann basierend auf diesem Schema nicht wirklich hilfreich sein.
Zwei Beispiele sollen dies erläutern.
1: <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
2:
3: th class="mdl-data-table__cell--non-numeric">Material</th>
Jedenfalls haben ich in diesem Kontext gelernt, das es ein Namensschema BEM gibt. In HMTL für Block-Element-Modifier.
Da CSS3 keine Namensräume kennt, stellen die MDL Entwickler das Präfix mdl- voran. In Anbetracht der schieren Fülle der Klassennamen tippt man sich einen Ast- hier mdl-textfield bis man überhaupt an der richtigen Stelle steht. Dazu kommt das man in der Regel immer zwei CSS Klassen Minimum benötigt. Eine für Design und eine fürs JavaScript.
BEM definiert einen Block, z.B. die HTML Tabelle, ein Menü oder Tab Bereich. Hier als Tabelle data-table genannt.
In der nächsten Hierarchiestufe findet sich das Element, getrennt mit einem doppelten Unterstrich. Beispiel ist data-table__cell oder textfield__input.
Da der Bindestrich schon für zusammengesetzte Worte genutzt wird (data-table), kommt ein doppelter Bindestrich für eine nächste Hierarchiestufe Modifier zum Einsatz. Obig wird die data-table als –selectable definiert oder die Schattentiefe.
Akademisch ist das eine gute Idee. In der Praxis ist der Schreibaufwand erheblich. Darüber hinaus sind die gewählten Namen (textfield, data-table, --floating-label ) selten intuitiv. Im Vergleich zu Bootstrap ergibt sich eine relevant geringere Produktivität.