BEM é uma metodologia para nomeação de classes em CSS, que o ajuda a criar um código reutilizável e sustentável.
BEM significa Bloco, Elemento, Modificador, que são as entidades BEM.
Bloco é um componente logicamente independente que encapsula estilos, comportamento ou tecnologias de implementação.
O elemento é uma parte de um bloco que não pode ser usado fora dele (por exemplo, itens dentro do bloco de menu).
O modificador é uma entidade BEM que define o estado, aparência e comportamento de blocos ou elementos. O uso dessa entidade é opcional.
.bloco-principal { padding:15px; } // Bloco
.bloco-principal__artigo { max-width:600px; } // Elemento separado por duplo underscore
.bloco-principal__artigo--fundo-cinza { background: #c9c9c9; } // Um modificador separado por dois traço
Para criar nosso blocos podemos usar namesspace para facilitar o entendimento.
l- - para layouts
c- - para components
u- - para utilitarios
s- - para escopos
js- - para iteragir com javascripts
qa- - para iteragir com testes
Os arquivos nestas pastas deve iniciar com _*.scss
base\ arquivos de definições basicas
components\ arquivos por componente
layout\ arquivos para definir layout
page\ arquivos para representar uma pagina
themes\ arquivos para representar partes do thema
abstracts\ variavéis, mixis e funções
vendors\ css de terceiros
main.scss O arquivo principal
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";
@import "base/animations"; //Os @keyframes
@import "base/base"; // reset, html, body initial
@import "base/typography";
@import "base/utilities"; // margins e alinhamentos com important
@import "components/*";
@import "layout/*";
@import "pages/*";
Exemplo de imports reduzido
@import "base";
@import "typography";
@import "sidebar";
@import "header";
@import "footer";
@import "base";
@import "layout";
@import "components";