Bem è un metodo di scrivere il nome delle classi css. Questa metodologia permette la riusabilità / modularità del codice. Esistono moltissime metologie ma qui approffondiremo solo questa.
Bem si divide in 3 parti: blocco, elemento e per finire modificatore.
Block: Sono blocchi che contengono del codice (codice standalone):
header, container, menu, checkbox, input
Element: Una parte del blocco:
menu item, list item, checkbox caption, header title
Modifier: tutto ciò che modifica l'elemento o un blocco:
disabled, highlighted, checked, fixed, size big, color yellow
Block:
html:
<div class="block">...</div>
css:
.block { padding: 80px; }
Element: Aggiungete il carattere __ al blocco
html:
<div class="login">
<input type="text" class="login__input"></input>
<input type="password" class="login__input"></input>
</div>
css:
.login__input { padding: 12px 6px; }
.
Modifier: Aggiungete il carattere -- al blocco o all'elemento
html:
<div class="login login--hidden">...</div>
<footer class="footer footer--size-big footer--shadow-yes">
<p class="footer__text--yellow"></p>
</footer>
css:
.login--hidden { }
.footer--size-big .footer--shadow-yes { }
.footer__text--yellow { }