Componente com estilos diferentes com BEM

[woliveiras]

Galera, mais uma dúvida sobre BEM CSS,

Eu possuo um componente já BEM"Mificado" e ele vai ter uma pequena diferença no estilo em dois ou mais locais.

Qual a maneira correta de se tratar isso?

[fdaciuk]

Essas metodologias ajudam bastante na organização do código, e no caso do BEM, me melhorias de performance. Mas penso que elas não devem ser seguidas "à risca", mas devem ser usadas para facilitar o seu trabalho.

Desde que você mantenha um padrão para a escrita dos componentes, não vejo problemas em não utilizar BEM para isso.

Mas usando BEM, você pode usar os modificadores para setar diferenças no mesmo componente: button, button--active, button--primary, etc.

Se você precisa de classes mais específicas nesses componentes, como por exemplo:
se você precisa estilizar o button--primary que está no header da sua aplicação, eu costumo fazer algo assim:

<header class="main-header">
  <a class="[ button button--primary ] main-header__button">Go!</a>
</header>

Usando os [ ] para dizer que, o que está ali, faz parte de um componente que pode ser reutilizado. Dando espaço entre as classes e os colchetes, eles não vão afetar em nada a sua marcação e estilização, e fica visualmente mais fácil de separar estilos para componentes, de estilos específicos para o header, como nesse caso =)

Uma outra coisa que eu tenho feito ultimamente, é misturar BEM com ITCSS.. o ITCSS eu uso somente para componentes, e o BEM para toda a aplicação. Ficaria algo assim:

<header class="main-header">
  <a class="[ button -primary ] main-header__button">Go!</a>
</header>

Enfim.. tente utilizar essas metodologias para te ajudar no projeto. Crie um padrão e siga com ele até o final =)

---

Errata: Onde está ITCSS, deveria ser RSCSS. Errei por 2 😜

[woliveiras]

Da hora @fdaciuk!

Valeu!

Acho que o esquema main-header__button é o mais adequado pro meu caso, pois é algo bem parecido... É um menu dropdown que, no header, possui diferença de posicionamento. 😄

[rickbenetti]

Legal isso de usar brackets pra separar as classes, já tinha visto por aí mas nada muito esclarecedor.

[leandroruel]

não entendi porque o último exemplo ficou [ button -primary ] e não [ button button--primary ]

[ramonsenadev]

@leandroruel
Acho que nesse último exemplo ele utilizou a especificação do rscss onde, as variações de um elemento é feita como na passagem de comandos no Unix.
Para saber mais sobre o rscss: http://rscss.io/

[leandroruel]

@ramonsenadev mas teoricamente isso não sai do BEM?

[fdaciuk]

Isso mesmo @leandroruel! No exemplo que eu dei, foi para mostrar que, para toda a marcação da sua página, você pode usar BEM, e para componentes, você pode utilizar RSCSS. Não vejo problemas em misturar metodologias, desde que faça sentido para você e para sua equipe =)

[akfzambrana]

@fdaciuk no caso do seu exemplo, a utilização de CSS namespaces também poderia ajudar, ja que ela é independente e pode trabalhar muito bem em conjunto com qualquer outra metodologia e ajuda justamente a separar objetos, componentes e modificadores

[fdaciuk]

Boa @akfzambrana! Também é uma possibilidade =)
Essa mistura de metodologias faz todo o sentido. Elas servem pra nos ajudar no desenvolvimento, e devem ser usadas para tal. Nâo dá pra ficar preso em uma coisa só 😄

[leandroruel]

entendi. valew amigos... por coincidência hoje estava lendo este artigo https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

[ghost]

A metodologia BEM é boa, só é chato na hora de usar os modifiers. Pois suja bastante o html.
Eu acabei encontrando uma alternativa bem interessante para isso, o dev Jordan Lewis trouxe uma ideia bem legal, parecida até com a rscss, chamada Chainable BEM Modifier.
Segue o link da apresentação: http://pt.slideshare.net/jordanlewiz/chainable-bem-modifiers

Exemplo:
<div class="block block__element -modifier"></div>

OBS.: Vou deixar um alerta para não usarem o modifier começando com dois hifens --, pois tem dispositivos, como por exemplos o iPad, que não reconhecem. O porquê eu não sei, mas quebrei muita cabeça pra saber o motivo do site ter quebrado rs.

[fdaciuk]

Que bizarro @wdss93! Qual a versão do safari no iPad você estava usando, sabe? O que poderia dar algum problema nesse caso é ele achar que é um comentário, já que comentários no HTML são <!-- e terminam com -->.. Ele pode ter interpretado como fechamento de comentário e ignorado o código xD

Mas uso BEM a bastante tempo, e nunca cheguei a ver esse tipo de problema. Sabendo a versão do iPad e Safari já vou ficar mais esperto quando testar xD

[ghost]

@fdaciuk, o problema parece acontecer com o iOS. Dando uma olhada la no csstyle encontrei um cara com o mesmo problema que eu tive, felizmente o autor da metodologia conseguiu solucionar a questão.

Confira: geddski/csstyle#56

[k8adev]

Resolvi deixar meu preconceito de lado e testar o BEM, e no projeto em que trampo, existe muito dessas de um elemento ser diferente em X lugares.

Me baseando na metodologia, o que defini para meu projeto:

• __ são elementos descendentes (que dependem de um pai para funcionar corretamente)
• -- são modificadores

Então, digamos que tenho um elemento product-card:

.product-card { ... }

.product-card__container {
    background: #fff;
    ...
}

E em X lugar, preciso que ele tenha um background diferente (um exemplo bem simples mas pense nisso em larga escala):

.product-card { ... }

.product-card__container {
    background: #fff;
    ...
}

.product-card--highlight .product-card__container {
    background: #ccc;
}

Uso um modificador apenas no block e altero com base nele os elementos descendentes.

Isso no html ficaria mais ou menos dessa forma:

<div class="product-card--highlight">
    <div class="product-card__container"></div>
</div>

Mais simples do que:

<div class="product-card product-card--highlight">
    <div class="product-card__container"></div>
</div>

ou

<div class="product-card">
    <div class="product-card__container product-card__container--highlight"></div>
</div>

Dessa forma, evito problemas comuns no BEM como a especificidade default x modifier e também evito criar/chamar várias classes para montar um elemento (o famoso subway), mantendo meu html mais legível.

Não existe forma correta, existe forma que atenda ao projeto e estilo que você e/ou seu time desenvolve.

[felipefialho]

Ta usando quase Atomic @keitoliveira 👍 😃

[woliveiras]

Show de bola!