Skip to content

Instantly share code, notes, and snippets.

@tesseslol
Last active February 12, 2017 21:22
Show Gist options
  • Save tesseslol/964d226a3efec927287851ff8a8d7d30 to your computer and use it in GitHub Desktop.
Save tesseslol/964d226a3efec927287851ff8a8d7d30 to your computer and use it in GitHub Desktop.
Bem un modo di pensare e scrivere CSS

La metodologia bem

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 (Block, Element, Modifier)

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

Esempi di BEM

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 { }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment