Nomeação BEM: Incluir rows e columns?

[theandersonn]

A partir da conversa na issue #721 fiquei com a pulga atrás da orelha e fui lá experimentar o BEM, confesso que me agradou bastante e fiquei impressionado com o fator (nomeação + escopo) x reutilização.

A minha dúvida:

No caso que eu estiver utilizando o grid de forma semântica, é um crime inafiançável incluir a row e a column no escopo do bloco? Qual é a melhor pratica?

Obs: É um bloco que a principio será utilizado somente naquela seção.

[a] Incluir a row e a column, e vai que é tua tafarel.
[b] Nunca incluir a row e criar um bloco especifico com a column, o conteúdo mais interno, tipo o miolo da alcatra é que rebeberá a estilização BEM.

Exemplo:

<section class="beautiful">
    <div class="beautiful__column">
        <article class="beautiful__content">
            <h2 class="beautiful__title">Lorem ipsum dolor sit!</h2>
            <img class="beautiful__thumb" src="thumb-beautiful.png" alt="">
        </article>
    </div>
    
    <div class="beautiful__column">
        <article class="beautiful__content">
            <h2 class="beautiful__title">Lorem ipsum dolor sit!</h2>
            <img class="beautiful__thumb" src="thumb-beautiful.png" alt="">
        </article>
    </div>
    
    <div class="beautiful__column">
        <article class="beautiful__content">
            <h2 class="beautiful__title">Lorem ipsum dolor sit!</h2>
            <img class="beautiful__thumb" src="thumb-beautiful.png" alt="">
        </article>
    </div>
</section>

.beautiful {
     @include make-row();

    &__column {
         @include make-sm-column(4);
    }
    
    &__content {}

    &__title {}

    &__thumb {}
}

[bernardodiasc]

O código que vc mandou parece válido. Não entendi direito, qual a dúvida? :)

[theandersonn]

@bernardodiasc Opa!

A minha dúvida é onde começar o escopo de um bloco. No exemplo que postei deveria começar na row ou no elemento em si que fica dentro da column ? Porque em termos de reaproveitamento não teria em problemas em inserir a beautiful__content em outro lugar.

É comum esse uso no BEM?

[bernardodiasc]

Se vc esta usando preprocesaador como aparenta, vc pode usar extend/mixin pra reutilizar estilos. A forma q vc fez tá boa, e a forma que vc pensa que poderia ser também funciona. O lance eh que pensar demais em abstrações e reutilizaçoes imaginárias, antes da real necessidade existir, pode atrapalhar mais do que ajudar.

[theandersonn]

Pô @bernardodiasc, entendi. Valeu!

Porque no meu pensamento, em caso ter dentro de cada column um card, ficaria mais obvio e semantico em futuras manutenções que o escopo do bloco começa-se a partir da parte interna da column como card.

Exemplo:

.card {}
.card__head {}
.card__title {}
.card__footer {} 

Mas existem casos que praticamente o código será feito somente para aquela seção, tipo algo bem ímpar, até por causa do tamanho do site. Então aplicaria o exemplo lá de cima, incluindo no escopo a row e a column que me facilitaria na nomeação desta seção.

[bernardodiasc]

Entendi, legal. Acho que as duas abordagens funcionam bem, é mesmo uma questão de ver qual funciona melhor pra sua necessidade.

Essa ideia de abstrair o .beautiful__content pra virar .card faz muito sentido. Acho que iria por esse caminho tambem. :)

[felipefialho]

@theandersonn

Sou um entusiasta do BEM, e observando seus exemplos de código, sinceramente não vejo problema nenhum em usar beautiful__column ou beautiful__row, fica claro pra você e fica claro pra qualquer pessoa que mexer no código depois.

Não encana com nome de classe não. O BEM já resolve escopo e consistência.

O nome da classe precisa ser claro e auto-explicativo, que é o caso do seu seu exemplo.

[theandersonn]

@lfeh pô valeu estava realmente encanado, pra não fazer algo muito diferente do comum.