Block, Element, Modifier (BEM)

Quellen:

http://getbem.com/introduction/

https://sparkbox.com/foundry/bem_by_example

---

Youtube:

https://www.youtube.com/results?search_query=bam+css

---

Was ist das, Warum sollte man das nutzen oder was gibt es noch?

BEM ist ein Teil von CSS. Es ist nicht , was man installiert oder einen Library. Das ist etwas ,was man damit, seine css Classes nennt.

BLOCK: Das definiert jeweilige Elemente auf eine Seite. so wie:

• Logo
• search
• Navigation
• Button
• Input

Element: Ein Teil eines Blocks, der keine eigenständige Bedeutung hat und semantisch mit seinem Block verbunden ist.

• Einzelne Punkte in Navigation
• Einzelne Elemente bei einem Formular

Modifier: Eine Markierung an einem Block oder Element. Verwenden Sie diese, um Aussehen oder Verhalten zu ändern.

• Farbe
• Große der schrift

---

Beispiele:

.block{}

.block--modifier{}

.block__element{}

.block__element--modifier{}

---

[block]__[element]--[modifier]

---