17.3.2021 |

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]


Zur Übersicht

Mehr vom DevSquad...

Adrian Görisch

Lottie

Lucas Meurer

Debug NodeJS with Intellij