Utilizando o padrão BEM no CSS

Olá, lendo alguns artigos da Alura, me deparei com alguns que falam sobre organização do código CSS, assim como nomes para suas classes, e fiquei bem interessado no padrão BEM, que vi em um desses artigos.

Sei que como é um curso introdutório, não dá pra inserir muito assunto e confundir ou cansar demais o aluno. Porém , eu estava estranhando a organização e nome de classes dados, porque não estava 100% organizado e coerente.

Dessa forma, resolvi reescrever parte do código da página tentando utilizar esse padrão BEM para os nomes das classes. Gostei bastante dessa proposta, na minha opinião esse padrão deixa o CSS bem mais legível e "entendível".

Gostaria de uma opinião sobre esse meu código. Ainda estou com algumas dificuldades:

1) o que fazer com sub-elementos de um elemento. Devo evitar isso?

2) uso uma section como um bloco principal, e o que estiver dentro serem elementos? Isso leva a ocorrência de sub-elementos de um elemento (por exemplo, se eu precisar de uma div, tudo que está na div acaba virando sub-elemento do elemento div). Ou seria melhor pensar em ter mais blocos?

https://gist.github.com/BrunoLemosCoutinho/2bc92a0f91ab03d6f32fcef94f72af1d

Fala ai Bruno, tudo bem? Vamos lá:

1) o que fazer com sub-elementos de um elemento. Devo evitar isso?

Eu recomendaria você extrair ele para outro bloco ou definí-lo como elemento do bloco mesmo, exemplo:

<div class="panel">
    <header class="panel__header">
        <h3 class="panel__title">Titulo</h3>
    </header
</div>

Nesse exemplo, o panel__title apesar de ser filho do panel__header é um elemento do bloco panel.

Ou:

<div class="panel">
    <header class="panel__header">
        <h3 class="title">Titulo</h3>
    </header
</div>

Nesse caso, ele seria outro bloco.

Algumas vezes essa dúvida de ser um sub elemento ou elemento pode te ajudar a quebrar e separar mais os elementos.

2) uso uma section como um bloco principal, e o que estiver dentro serem elementos? Isso leva a ocorrência de sub-elementos de um elemento (por exemplo, se eu precisar de uma div, tudo que está na div acaba virando sub-elemento do elemento div). Ou seria melhor pensar em ter mais blocos?

Nesse caso você iria ter mais blocos, a ideia dos blocos não é ter apenas um e todos seus filhos são elementos, os blocos também podem ter outros blocos.

A separação de blocos pode ser feita por contexto e semântica, ou seja: Painel, Botao, Alerta, Modal, Dialogo, etc...

Espero ter ajudado.