BEM es una metología de organización o estructuración del CSS. Existen otras como OOCSS, SMACSS, SUITCSS o Atomic.
En qué consiste
Antes de describir en que consiste, vamos a indicar los elementos que intervienen:
Bloque
Entidades con significado propio. Por ejemplo: header, container, menú…
Elemento
Partes de un bloque que no tienen significado propio: menu item, list item, checkbox caption, header title
Modificador
Banderas/flags sobre elementos o bloques. Se utilizan para cambiar su apariencia o conducta.
Ejemplo de nombrado con modificadores
Podemos tener un botón para casos habituales, y tener uno o más estados para botones diferentes. BEM fija estilos el los tags con selectores de clase CSS por tanto podríamos implementar el botón con un tag tipo button, a, div…
Si tenemos un botón normal, otro para situaciones de éxito y otro para situaciones de peligro o error, el nombrado de clases sería el siguiente:
<button class="button"> Normal button </button>
<button class="button button--state-success"> Success button </button>
<button class="button button--state-danger"> Danger button </button>
Block
Su nombrado CSS será el nombre de la clase que decidamos, por ejemplo: block, content…
<div class="block">...</div>
Element
Su nombrado se compone del nombre del bloque al que pertenece, seguido por dos guiones bajos más el nombre del elemento. Ejemplo: block__elem
<div class="block">
...
<span class="block__elem"></span>
</div>
Modificador
Como vimos en el primer ejemplo del botón, su nombrado de clase se obtiene concatenando el nombre de clase CSS del elemento o bloque más dos guiones medios seguidos del nombre del modificador.
Ejemplo:
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
Aquí podríamos ver otro ejemplo más completo:
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>
Esperamos que os sirva de ayuda y os permita crear ficheros CSS más limpios y estructurados.