Solucionado
Boa tarde, fiquei com uma dúvida em relação a nomeação de classes CSS utilizando BEM, já chegou ocorrer de eu ver necessidade de utilizar a mesma classe contendo a mesma estilização, só que para um elemento de outro bloco, ai eu fiquei com dúvida em relação a isso. Eu poderia renomear a classe de acordo com aquele bloco, porém ai eu teria que reescrever um código CSS (o que não é uma boa prática), apenas para manter o BEM no nome das classes de blocos diferentes.
Olá Victor!
Entendo sua dúvida em relação à nomeação de classes CSS utilizando BEM. É comum surgirem situações em que você precisa aplicar a mesma estilização para um elemento de outro bloco. Nesses casos, você pode utilizar a mesma classe, desde que ela esteja relacionada ao mesmo conceito e tenha a mesma estilização.
No entanto, se você precisar aplicar uma estilização diferente para um elemento de outro bloco, é recomendado criar uma nova classe específica para esse elemento. Dessa forma, você mantém a consistência do BEM na nomenclatura das classes, evitando a reescrita desnecessária de código CSS.
Por exemplo, suponha que você tenha um bloco chamado "botão" e outro bloco chamado "card". Se ambos os blocos possuem um elemento com a mesma estilização, você pode utilizar a mesma classe para esse elemento em ambos os blocos. Porém, se você precisar aplicar uma estilização diferente para esse elemento no bloco "card", é recomendado criar uma nova classe específica para ele, como por exemplo "card__botão".
Dessa forma, você mantém a semântica do BEM e facilita a manutenção do código CSS no futuro. Lembre-se sempre de buscar a simplicidade e a clareza na nomenclatura das classes, para facilitar a compreensão do código por você e por outros desenvolvedores.
Contudo, claro, se você deseja economizar linhas de código você pode simplesmente atribuir para várias classes o mesmo estilo usando uma classe padrão para todas elas e em sequência colocar a classe específica como manda o BEM, dessa forma:
<div class="card-preto botao"></div>
<article class="card-preto card"></article>
<a href="/" class="card-preto link"></a>
<section class="card-preto secao__destaque"></section>
E estilizar a classe .card-preto com os estilos que seriam repetidos e depois sobrescrever eles com a segunda classe, mas já aviso de antemão que isso não é tão recomendado.
Ou você pode colocar classes diferentes em um mesmo estilos, dessa forma aqui:
.botao,
.card,
.link,
.secao__destaque {
display: flex;
margin: 1rem;
padding: 1.5rem;
background-color: black;
}
Como você pode ver aqui eu coloque o mesmo estilo para várias classes usando o separador vírgula ",".
Em suma era isso, caso ainda tenha dúvidas fique à vontade para perguntas, fico à disposição para isso.
E se não entendeu algo é só falar que eu explico de outra forma.
Espero ter ajudado, abraços e bons estudos!