0

Metodología BEM

Randy Viñoles
Randy Viñoles

O que é o BEM?


BEM é uma metodologia para nomeação de classes em CSS, que ajuda a criar um código reutilizável e sustentável. Criado por volta de 2005, pela Yandex, empresa líder na Internet russa, surgiu de uma necessidade de padronizar o código em variados projetos.


A ideia é dividir a página em blocos.


BEM significa Bloco, Elemento, Modificador, que são as entidades BEM.


Bloco

Bloco é um componente logicamente independente que encapsula estilos, comportamento ou tecnologias de implementação. O fato de que os blocos são independentes nos permite reutilizá-los facilmente.


Outras características dos blocos:


1) estrutura aninhada (os blocos podem consistir em outros blocos)


2) colocação arbitrária (os blocos funcionarão adequadamente, mesmo quando você mudar sua posição na página ou os usa em outro projeto)


Elemento

O elemento é uma parte de um bloco que não pode ser usado fora dele (por exemplo, itens dentro do bloco de menu).


Modificador

O modificador é uma entidade BEM que define o estado, aparência e comportamento de blocos ou elementos — blocos idênticos podem parecer diferentes por causa de um modificador. O uso dessa entidade é opcional.


Como usar o BEM?


Convenções de nomeação

A ideia por trás de várias convenções de nomeação BEM é torná-las informativas e fáceis de entender o quanto possível. Existem alguns estilos de nomeação populares: Yandex, Harry Roberts, CamelCase, ‘Sans underscore’, Prefixes. Para mim, o estilo Harry Roberts é o mais legível.


Neste estilo, os blocos devem ser separados por dois sublinhados, e o modificadores devem ser separados por dois traços. Cada um dos blocos, elementos e modificadores podem ser separados por um hífen. Exemplo:


.bloco-principal { padding:15px; }


.bloco-principal__artigo { max-width:600px; }


.bloco-principal__artigo--fundo-cinza { background: #c9c9c9; }


Fonte: https://medium.com/@fnandaleite/metodologia-bem-para-css-b0d3269b4853
0
0

Comentários (0)

None

Brasil