BEM CSS

Assistindo a Live Coding - Multiverso Spider-Man: Criando um site com HTML, CSS e JavaScript que foi transmitida ontem apresentada pelos experts Michele Ambrosio e Diogo Mainardes, que por sinal foi sensacional e caso você não tenha visto recomendo fortemente assisti-la. Logo de início me deparei com um termo novo que eu não conhecia, o BEM CSS.

BEM CSS Esta é uma convenção que visa uma padronização na nomenclatura das classes do css, tornando mais fácil o sua compreensão. BEM é um acrônimo que significa Block Element Modifier, traduzindo para o português bloco, elemento, modificador. esses três termos são os pontos principais dessa metodologia que definem a maneira como será estruturada a classificação das classes.

Ex:

.input - bloco;

.input__box, input__button - elementos;

input__button--red - modificador;

Bloco - é a classe referente ao elemento pai de um determinado grupo de elementos;

Elemento - são todos os elementos filhos recebem como nome da classe o nome dado ao bloco seguido de 2 underlines (__) e o nome referente ao elemento em si que essa classe vai corresponder;

Modificadores - indicado pelo uso de 2 traços (--) refere-se a uma classe que como o nome já diz modifica algo no estilo daquele elemento ou bloco que já possui uma classe original.

Essa classe faz modificações que podem ser reutilizadas e

indica que aquele elemento possui um estilo um pouco diferente do original.

Se você tiver interesse em saber mais sobre esse assunto : http://getbem.com/introduction/