SlideShare ist ein Scribd-Unternehmen logo
©2016 Stefan Franke
BEModer „Das Ende des Spezifizitätskrieges“
https://en.bem.info/methodology/
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
Verwendung von !important
Inline-Styles
»
»
»
»
»
Status quo
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
Verwendung von !important
Inline-Styles
„specificity war“
https://jonassebastianohlsson.com/specificity-graph/
»
»
»
»
»


Status quo
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
Verwendung von !important
Inline-Styles
„specificity war“
https://jonassebastianohlsson.com/specificity-graph/
CSS-Code nicht erweiterbar, wartbar oder wiederverwendbar
»
»
»
»
»



Status quo
©2016 Stefan Franke
Hauptsächlich Fokus auf Eigenschaften & Werte
div.product table td a.button { ... }
typische Frage:
„Ist das Screendesign korrekt umgesetzt?“
©2016 Stefan Franke
Bisher kaum Fokus auf Architektur
div.product table td a.button { ... }
Mit Architektur:
Vorhersagbarkeit
Skalierbarkeit & Flexibilität
niedrige Spezifizität



Ohne Architektur:
unvorhersehbare Nebeneffekte
unnötige Abhängigkeiten
hohe Spezifizität bzw.
Überqualifizierung



©2016 Stefan Franke
BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung



»
»
»
©2016 Stefan Franke
BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung
oft fehlendes
Problembewusstsein!



»
»
»

©2016 Stefan Franke
Hintergrund
seit 2009
von Yandex entwickelt
einige Varianten der Nomenklatur
z.B. Google Developers (Material Design Lite, Web Starter Kit)
»
»
»
»
Alternativen:
OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“)
SMACSS
»
»
©2016 Stefan Franke
Hintergrund
seit 2009
von Yandex entwickelt
einige Varianten der Nomenklatur
z.B. Google Developers (Material Design Lite, Web Starter Kit)
»
»
»
»
Alternativen:
OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“)
SMACSS
»
»
Kritik: nicht streng genug
Kritik: zu streng
©2016 Stefan Franke
Was ist ein Block?
logisch und funktional unabhängiger Bestandteil der Website
logo
head
nav
call-to-action
search
©2016 Stefan Franke
Blöcke sind wiederverwendbar
Block
©2016 Stefan Franke
Was ist ein Element?
Ein Element ist ein Bestandteil eines Blocks.
kann nicht ohne den Kontext des Blocks existieren
Block
Element
©2016 Stefan Franke
Was ist ein Modifier?
bestimmt das Aussehen eines Blocks oder Elements abhängig vom jeweiligen
Kontext bzw. Status
Modifier können mehrfach vergeben werden
»
»
Block
modifizierter
Block
©2016 Stefan Franke
BEM ♥ Namenskonventionen
Kleinschreibung
Minus-Zeichen, um einzelne Wörter innerhalb eines Namens zu trennen
doppelter Unterstrich für Element
doppeltes Minus-Zeichen für Modifier
»
»
»
»
Block
Element
Modifier
block-name
block-name__elem-name
block-name--mod-name
block-name__elem-name--mod-name
©2016 Stefan Franke
©2016 Stefan Franke
Beispiele
www.newser.com
©2016 Stefan Franke
Element in Element – BEM says „no“
block__elem-1__elem-2
zu große Abhängigkeit von der Struktur des HTML-Codes
<div class="block">
<h3 class="block__title"></h3>
<div class="block__content">
<img class="block__img">
<p class="block__text">
<a class="block__link"></a>
</p>
</div>
</div>
BEM-Elemente haben flache Struktur:
©2016 Stefan Franke
In medias res – der HTML-Code
<ul class="nav">
<li class="item active"><a>1</a></li>
<li class="item"><a>2</a></li>
<li class="item"><a>3</a></li>
</ul>
<ul class="nav">
<li class="nav__item nav__item--active"><a class="nav__link">1</a></li>
<li class="nav__item"><a class="nav__link">2</a></li>
<li class="nav__item"><a class="nav__link">3</a></li>
</ul>
Kapselung durch CSS-Klassen
jeder anzusprechende DOM-Node bekommt eine eigene CSS-Klasse
»
»
alt:
neu:
©2016 Stefan Franke
In medias res – der CSS-Code
<ul class="nav">
<li class="nav__item nav__item--active"><a class="nav__link">1</a></li>
<li class="nav__item"><a class="nav__link">2</a></li>
<li class="nav__item"><a class="nav__link">3</a></li>
</ul>
.nav {}
.nav__item {}
.nav__item--active {}
.nav__link {}
flache Struktur (DOM-Änderungen jederzeit möglich)
alle Anweisungen haben gleiche Spezifizität
wiederverwendbar (Ähnlichkeiten zu OOP)
keine unerwarteten Nebeneffekte
semantisch aufgeladener CSS-Code
»
»
»
»
»
©2016 Stefan Franke
nur bei Modifiern erlaubt!
Beispiel „Element-Modifier“:
<ul class="nav nav--minimal">
<li class="nav__item nav__item--active"><a class="nav__link">1</a></li>
<li class="nav__item"><a class="nav__link">2</a></li>
<li class="nav__item"><a class="nav__link">3</a></li>
</ul>
CSS:
.nav--minimal .nav__item { }

Selektorketten sind böööse
©2016 Stefan Franke
Diskussion „mehrere vs. ein zusammengefasster Modifier“
class="nav__item nav__item--active nav__item--last"
class="nav__item nav__item--active--last"
Problem: mehrere Modifier
©2016 Stefan Franke
Diskussion „mehrere vs. ein zusammengefasster Modifier“
class="nav__item nav__item--active nav__item--last"
class="nav__item nav__item--active--last" Reihenfolge!
Redundanz!
Problem: mehrere Modifier
Vorschlag: mehrere Modifier verwenden
©2016 Stefan Franke
IDs und Tags im CSS-Code nicht erlaubt
IDs erhöhen Spezifizität
Tags erzeugen unnötige Abhängigkeiten


div.nav
header .nav__item
.aside h3



.nav
.nav--header .nav__item
.teaser--aside .teaser__title



©2016 Stefan Franke
IDs und Tags im CSS-Code nicht erlaubt
IDs erhöhen Spezifizität
Tags erzeugen unnötige Abhängigkeiten


div.nav
header .nav__item
.aside h3



.nav
.nav--header .nav__item
.teaser--aside .teaser__title



Exkurs:
IDs nur für JavaScript verwenden!
Klassen sollten nicht als JavaScript-Selektoren dienen!


©2016 Stefan Franke
Hinweise zur Benennung von CSS-Klassen
aussagekräftige Klassennamen (d.h. nur ganz offensichtliche Abkürzungen)
keine visuellen Merkmale im Klassennamen


.nav__item--active
.nav__item--disabled
.headline--primary



.nav__item--border
.nav__item--grey
.headline--red



©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Beginn eines neuen Blocks
Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse


©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Beginn eines neuen Blocks
Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse
BEM Mix



header
header__logo header__nav header__search
©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Beginn eines neuen Blocks
Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse
BEM Mix



header
header__logo header__nav header__search
logo nav search
©2016 Stefan Franke
Verzeichnis- und Dateistruktur
components.less header.less
logo.less
logo--top-bar.less
nav.less
nav--footer.less
gallery.less
…
@import
CSS-Datei (TYPO3-Extension „t3_less“)
jeder Block bzw. Block-Modifier bekommt eigene LESS-/SASS-Datei
©2016 Stefan Franke
„Puh, da muss man ja sooo viel schreiben!“
CSS-Code wird schlanker durch geringe Spezifizität
geringerer Zeitaufwand für Änderungen
CSS-Preprocessor (LESS, SASS)



BEM ist bäh #1
©2016 Stefan Franke
BEM + LESS/SASS
// Block
.nav {
	
// Element
&__item {
background-color: @color-primary
// Modifier
&--active { background-color: lighten(@color-primary, 5) }
}
}
resultierender CSS-Code
.nav__item { background-color: #abcdef }
.nav__item--active { background-color: #bcdefa }
©2016 Stefan Franke
„Pah, das ist für Leute, die sich mit CSS nicht auskennen.“
falsche Frage: „Ist das Screendesign korrekt umgesetzt?“
richtige Frage: „Kann der CSS-Code gewartet, wiederverwendet und
ohne unerwünschte Nebeneffekte erweitert werden?“


BEM ist bäh #2
©2016 Stefan Franke
„Pfff, das File-System ist ja der komplette Overkill.“
strukturiert und übersichtlich
@import: PhpStorm short cut [Strg] + B
Blöcke schnell entfernen bzw. hinzufügen
Kapselung der MediaQuery-Styles (print, responsive) in einer Datei




BEM ist bäh #3
©2016 Stefan Franke
TL;DL – too long, didn’t listen
BEM bringt Struktur in den CSS-Code
BEM löst die Abhängigkeit zwischen HTML- und CSS-Code
Spezifizität wird auf Minimum reduziert
IDs und Tags im CSS-Code verboten




©2016 Stefan Franke
TL;DL – too long, didn’t listen
BEM bringt Struktur in den CSS-Code
BEM löst die Abhängigkeit zwischen HTML- und CSS-Code
Spezifizität wird auf Minimum reduziert
IDs und Tags im CSS-Code verboten




schont NERVEN & ZEIT
©2016 Stefan Franke
Mehr davon? Interessante und weiterführende Links
https://en.bem.info/methodology/
https://getmdl.io/
https://developers.google.com/web/tools/starter-kit/
https://www.theodo.fr/blog/2015/10/how-i-stopped-worrying-
and-learned-to-love-the-css-with-bem/




©2016 Stefan Franke
Vielen Dank für die Aufmerksamkeit!

Weitere ähnliche Inhalte

Andere mochten auch

Principios Electricos y Aplicaciones digitales
Principios Electricos y Aplicaciones digitalesPrincipios Electricos y Aplicaciones digitales
Principios Electricos y Aplicaciones digitalesKaraa Xiah Poot
 
Trabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlabTrabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlab
Universidad Politecnica Salesiana
 
241011 mein betrieb meine zukunft optimierte variante
241011 mein betrieb meine zukunft  optimierte variante241011 mein betrieb meine zukunft  optimierte variante
241011 mein betrieb meine zukunft optimierte varianteSeverin Kierlinger-Seiberl
 
Literatura medieval
Literatura medievalLiteratura medieval
Literatura medieval
Tatty Aponte
 
Valores
ValoresValores
Beispiel screenablauf klinik2
Beispiel screenablauf klinik2Beispiel screenablauf klinik2
Beispiel screenablauf klinik2
mpwirges
 
Trabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlabTrabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlab
Universidad Politecnica Salesiana
 
Internet
InternetInternet
Internet
erikat2
 
MAAQUINA VIRTUAL
MAAQUINA VIRTUALMAAQUINA VIRTUAL
MAAQUINA VIRTUAL
paola_yanina
 
Online Zukunftstrends 2014
Online Zukunftstrends 2014 Online Zukunftstrends 2014
Online Zukunftstrends 2014
Michael Aechtler
 
Redes sociales
Redes socialesRedes sociales
Redes sociales
Antony Botello
 
Trabajo grupal factorizacion matlab 2
Trabajo grupal factorizacion matlab 2Trabajo grupal factorizacion matlab 2
Trabajo grupal factorizacion matlab 2
Universidad Politecnica Salesiana
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
chmoser79
 
Sca 2014
Sca 2014Sca 2014
Empresa na aula
Empresa na aulaEmpresa na aula
Empresa na aula
estefaniastray
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Symposia Media
 

Andere mochten auch (17)

Principios Electricos y Aplicaciones digitales
Principios Electricos y Aplicaciones digitalesPrincipios Electricos y Aplicaciones digitales
Principios Electricos y Aplicaciones digitales
 
Trabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlabTrabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlab
 
241011 mein betrieb meine zukunft optimierte variante
241011 mein betrieb meine zukunft  optimierte variante241011 mein betrieb meine zukunft  optimierte variante
241011 mein betrieb meine zukunft optimierte variante
 
Literatura medieval
Literatura medievalLiteratura medieval
Literatura medieval
 
Valores
ValoresValores
Valores
 
Beispiel screenablauf klinik2
Beispiel screenablauf klinik2Beispiel screenablauf klinik2
Beispiel screenablauf klinik2
 
Trabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlabTrabajo grupal factorizacion matlab
Trabajo grupal factorizacion matlab
 
Internet
InternetInternet
Internet
 
MAAQUINA VIRTUAL
MAAQUINA VIRTUALMAAQUINA VIRTUAL
MAAQUINA VIRTUAL
 
Online Zukunftstrends 2014
Online Zukunftstrends 2014 Online Zukunftstrends 2014
Online Zukunftstrends 2014
 
Redes sociales
Redes socialesRedes sociales
Redes sociales
 
Trabajo grupal factorizacion matlab 2
Trabajo grupal factorizacion matlab 2Trabajo grupal factorizacion matlab 2
Trabajo grupal factorizacion matlab 2
 
Tieto fo at_sugarcrm
Tieto fo at_sugarcrmTieto fo at_sugarcrm
Tieto fo at_sugarcrm
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
 
Sca 2014
Sca 2014Sca 2014
Sca 2014
 
Empresa na aula
Empresa na aulaEmpresa na aula
Empresa na aula
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
 

Ähnlich wie BEM – „Das Ende des Spezifizitätskrieges“

TYPO3-Checkliste
TYPO3-ChecklisteTYPO3-Checkliste
TYPO3-Checkliste
Stefan Franke
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenAndreas Kalt
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itBelsoft
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
Sebastian Adler
 
TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?
CS2 AG
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
Kay Strobach
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
Belsoft
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
Peter Müller
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Bernhard Kau
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Peter Rozek
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
Steffen Ritter
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 

Ähnlich wie BEM – „Das Ende des Spezifizitätskrieges“ (20)

TYPO3-Checkliste
TYPO3-ChecklisteTYPO3-Checkliste
TYPO3-Checkliste
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
 
TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?TYPO3 4.5 LTS - Was ist neu?
TYPO3 4.5 LTS - Was ist neu?
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
 
Wer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die QualWer die (Client) Wahl hat, hat die Qual
Wer die (Client) Wahl hat, hat die Qual
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 

BEM – „Das Ende des Spezifizitätskrieges“

  • 1. ©2016 Stefan Franke BEModer „Das Ende des Spezifizitätskrieges“ https://en.bem.info/methodology/
  • 2. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles » » » » » Status quo
  • 3. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles „specificity war“ https://jonassebastianohlsson.com/specificity-graph/ » » » » »   Status quo
  • 4. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles „specificity war“ https://jonassebastianohlsson.com/specificity-graph/ CSS-Code nicht erweiterbar, wartbar oder wiederverwendbar » » » » »    Status quo
  • 5. ©2016 Stefan Franke Hauptsächlich Fokus auf Eigenschaften & Werte div.product table td a.button { ... } typische Frage: „Ist das Screendesign korrekt umgesetzt?“
  • 6. ©2016 Stefan Franke Bisher kaum Fokus auf Architektur div.product table td a.button { ... } Mit Architektur: Vorhersagbarkeit Skalierbarkeit & Flexibilität niedrige Spezifizität    Ohne Architektur: unvorhersehbare Nebeneffekte unnötige Abhängigkeiten hohe Spezifizität bzw. Überqualifizierung   
  • 7. ©2016 Stefan Franke BEM Block Element Modifier einfaches System geringe Lernkurve große Umstellung    » » »
  • 8. ©2016 Stefan Franke BEM Block Element Modifier einfaches System geringe Lernkurve große Umstellung oft fehlendes Problembewusstsein!    » » » 
  • 9. ©2016 Stefan Franke Hintergrund seit 2009 von Yandex entwickelt einige Varianten der Nomenklatur z.B. Google Developers (Material Design Lite, Web Starter Kit) » » » » Alternativen: OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“) SMACSS » »
  • 10. ©2016 Stefan Franke Hintergrund seit 2009 von Yandex entwickelt einige Varianten der Nomenklatur z.B. Google Developers (Material Design Lite, Web Starter Kit) » » » » Alternativen: OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“) SMACSS » » Kritik: nicht streng genug Kritik: zu streng
  • 11. ©2016 Stefan Franke Was ist ein Block? logisch und funktional unabhängiger Bestandteil der Website logo head nav call-to-action search
  • 12. ©2016 Stefan Franke Blöcke sind wiederverwendbar Block
  • 13. ©2016 Stefan Franke Was ist ein Element? Ein Element ist ein Bestandteil eines Blocks. kann nicht ohne den Kontext des Blocks existieren Block Element
  • 14. ©2016 Stefan Franke Was ist ein Modifier? bestimmt das Aussehen eines Blocks oder Elements abhängig vom jeweiligen Kontext bzw. Status Modifier können mehrfach vergeben werden » » Block modifizierter Block
  • 15. ©2016 Stefan Franke BEM ♥ Namenskonventionen Kleinschreibung Minus-Zeichen, um einzelne Wörter innerhalb eines Namens zu trennen doppelter Unterstrich für Element doppeltes Minus-Zeichen für Modifier » » » » Block Element Modifier block-name block-name__elem-name block-name--mod-name block-name__elem-name--mod-name
  • 18.
  • 19.
  • 20. ©2016 Stefan Franke Element in Element – BEM says „no“ block__elem-1__elem-2 zu große Abhängigkeit von der Struktur des HTML-Codes <div class="block"> <h3 class="block__title"></h3> <div class="block__content"> <img class="block__img"> <p class="block__text"> <a class="block__link"></a> </p> </div> </div> BEM-Elemente haben flache Struktur:
  • 21. ©2016 Stefan Franke In medias res – der HTML-Code <ul class="nav"> <li class="item active"><a>1</a></li> <li class="item"><a>2</a></li> <li class="item"><a>3</a></li> </ul> <ul class="nav"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> Kapselung durch CSS-Klassen jeder anzusprechende DOM-Node bekommt eine eigene CSS-Klasse » » alt: neu:
  • 22. ©2016 Stefan Franke In medias res – der CSS-Code <ul class="nav"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> .nav {} .nav__item {} .nav__item--active {} .nav__link {} flache Struktur (DOM-Änderungen jederzeit möglich) alle Anweisungen haben gleiche Spezifizität wiederverwendbar (Ähnlichkeiten zu OOP) keine unerwarteten Nebeneffekte semantisch aufgeladener CSS-Code » » » » »
  • 23. ©2016 Stefan Franke nur bei Modifiern erlaubt! Beispiel „Element-Modifier“: <ul class="nav nav--minimal"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> CSS: .nav--minimal .nav__item { }  Selektorketten sind böööse
  • 24. ©2016 Stefan Franke Diskussion „mehrere vs. ein zusammengefasster Modifier“ class="nav__item nav__item--active nav__item--last" class="nav__item nav__item--active--last" Problem: mehrere Modifier
  • 25. ©2016 Stefan Franke Diskussion „mehrere vs. ein zusammengefasster Modifier“ class="nav__item nav__item--active nav__item--last" class="nav__item nav__item--active--last" Reihenfolge! Redundanz! Problem: mehrere Modifier Vorschlag: mehrere Modifier verwenden
  • 26. ©2016 Stefan Franke IDs und Tags im CSS-Code nicht erlaubt IDs erhöhen Spezifizität Tags erzeugen unnötige Abhängigkeiten   div.nav header .nav__item .aside h3    .nav .nav--header .nav__item .teaser--aside .teaser__title   
  • 27. ©2016 Stefan Franke IDs und Tags im CSS-Code nicht erlaubt IDs erhöhen Spezifizität Tags erzeugen unnötige Abhängigkeiten   div.nav header .nav__item .aside h3    .nav .nav--header .nav__item .teaser--aside .teaser__title    Exkurs: IDs nur für JavaScript verwenden! Klassen sollten nicht als JavaScript-Selektoren dienen!  
  • 28. ©2016 Stefan Franke Hinweise zur Benennung von CSS-Klassen aussagekräftige Klassennamen (d.h. nur ganz offensichtliche Abkürzungen) keine visuellen Merkmale im Klassennamen   .nav__item--active .nav__item--disabled .headline--primary    .nav__item--border .nav__item--grey .headline--red   
  • 29. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse  
  • 30. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse BEM Mix    header header__logo header__nav header__search
  • 31. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse BEM Mix    header header__logo header__nav header__search logo nav search
  • 32.
  • 33. ©2016 Stefan Franke Verzeichnis- und Dateistruktur components.less header.less logo.less logo--top-bar.less nav.less nav--footer.less gallery.less … @import CSS-Datei (TYPO3-Extension „t3_less“) jeder Block bzw. Block-Modifier bekommt eigene LESS-/SASS-Datei
  • 34. ©2016 Stefan Franke „Puh, da muss man ja sooo viel schreiben!“ CSS-Code wird schlanker durch geringe Spezifizität geringerer Zeitaufwand für Änderungen CSS-Preprocessor (LESS, SASS)    BEM ist bäh #1
  • 35. ©2016 Stefan Franke BEM + LESS/SASS // Block .nav { // Element &__item { background-color: @color-primary // Modifier &--active { background-color: lighten(@color-primary, 5) } } } resultierender CSS-Code .nav__item { background-color: #abcdef } .nav__item--active { background-color: #bcdefa }
  • 36. ©2016 Stefan Franke „Pah, das ist für Leute, die sich mit CSS nicht auskennen.“ falsche Frage: „Ist das Screendesign korrekt umgesetzt?“ richtige Frage: „Kann der CSS-Code gewartet, wiederverwendet und ohne unerwünschte Nebeneffekte erweitert werden?“   BEM ist bäh #2
  • 37. ©2016 Stefan Franke „Pfff, das File-System ist ja der komplette Overkill.“ strukturiert und übersichtlich @import: PhpStorm short cut [Strg] + B Blöcke schnell entfernen bzw. hinzufügen Kapselung der MediaQuery-Styles (print, responsive) in einer Datei     BEM ist bäh #3
  • 38. ©2016 Stefan Franke TL;DL – too long, didn’t listen BEM bringt Struktur in den CSS-Code BEM löst die Abhängigkeit zwischen HTML- und CSS-Code Spezifizität wird auf Minimum reduziert IDs und Tags im CSS-Code verboten    
  • 39. ©2016 Stefan Franke TL;DL – too long, didn’t listen BEM bringt Struktur in den CSS-Code BEM löst die Abhängigkeit zwischen HTML- und CSS-Code Spezifizität wird auf Minimum reduziert IDs und Tags im CSS-Code verboten     schont NERVEN & ZEIT
  • 40. ©2016 Stefan Franke Mehr davon? Interessante und weiterführende Links https://en.bem.info/methodology/ https://getmdl.io/ https://developers.google.com/web/tools/starter-kit/ https://www.theodo.fr/blog/2015/10/how-i-stopped-worrying- and-learned-to-love-the-css-with-bem/    
  • 41. ©2016 Stefan Franke Vielen Dank für die Aufmerksamkeit!