Olá dev!

Se você pretende atuar ou já atua como dev front-end sabe que o CSS é indispensável, e para ajudar a nossa vida utilizando o CSS existe o BEM!

BEM é uma metodologia para nomeação de classes em CSS, que o 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.

Segundo Varya Stepanova, uma das desenvolvedoras front-end que já fez parte do time BEM da própria Yandex,

"BEM faz alusão a Programação Orientada a Objetos (POO), uma maneira de descrever a realidade no código, com uma variedade de padrões e uma maneira de pensar nas entidades do programa."

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.

• estrutura aninhada (os blocos podem consistir em outros blocos)
• 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

Um Elemento faz parte de um Bloco; é um elemento-filho. Um Elemento não tem função/significado independente e está semanticamente vinculado ao seu respectivo Bloco (por exemplo, itens dentro do bloco de menu).

Elementos têm uma regra específica de escrita, sendo uma classe CSS composta de Nome do Bloco + 2 underlines + nome do Elemento: .[Bloco]__[Elemento].

Por exemplo, se você tem um Bloco .c-menu, um Elemento dele pode ser .c-menu__item ou .c-menu__link.

Modificador

O modificador é uma entidade BEM que define o estado, aparência e comportamento ele pode ser aplicado tanto em um Bloco, quanto em um Elemento, servindo como uma variante usada para alterar sua aparência, variar uma propriedade ou atribuir um estado.

Sua regra de escrita é uma classe composta pelo nome de um Bloco ou Modificador + 2 hífens + o nome do Modificador: [Bloco|Elemento]--[Modificador].

Seguindo o exemplo, poderia haver um modificador para o menu .c-menu--dark para um versão escura; uma versão do menu fixa com .c-menu--fixed ou; para links desabilitados, .c-menu__link--disabled.

Exemplos:

.menu {} 

.menu__item {} 

.menu__link {} 

.menu__link--disabled {}

.card {}

.card--dark {}

.card__button {}

.card__button--dark{}

Como mudar para o estilo CSS BEM

Para implementar os princípios BEM em um projeto:

• Coloque de lado o modelo DOM e aprenda a criar blocos.
• Não use seletores de ID ou de tags.
• Minimize o número de seletores aninhados.
• Use a convenção de classes CSS para evitar colisões de nome e nomeie seus seletores de maneira informativa e clara, sempre que possível.
• Trabalhe em termos de blocos, elementos e modificadores.
• Mova as propriedades CSS de um bloco para modificadores se eles provavelmente irão mudar.
• Use mixes.
• Divida o código em pequena e independentes partes para facilitar o trabalho com blocos.
• Reuse blocos.

Vou deixar aqui alguns links que falam mais sobre essa metodologia caso queiram se aprofundar mais:

https://www.youtube.com/watch?v=rltjnLyjFZk&t=24s

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

https://desenvolvimentoparaweb.com/css/bem/

Se você gostou desse conteúdo de uma olhada no meu outro artigo aonde falo sobre Grid e FlexBox

https://web.dio.me/articles/css-grid-ou-flexbox?back=%2Farticles&page=1&order=oldest