Utilização de BEM para estruturar o CSS

[woliveiras]

Galera, uma dúvida que nos surgiu aqui sobre a utilização de BEM.

Temos uma tela com um bloco com um subtítulo e um texto ao lado.

Imaginem algo como:

-------------------------------------------------------------
                         bloco
------------------    ---------------------------------------
| subtitulo      |    | texto     
------------------    ---------------------------------------
-------------------------------------------------------------

A dúvida é:

Seguindo o BEM, o que fazemos com tipografia?

Estilizaremos diretamente o subtítulo (o h2)? Se sim, como podemos utilizar modificadores nesse subtítulo?

Por que nós temos locais onde o subtítulo não possui esse texto do lado e vai aparecer de outra maneira.

Não achamos em nenhum lugar como pensar nesse esquema. 😖

Basicamente estamos penando em:

Como vamos estilizar os elementos que não possuem blocos ou todo elemento precisa ter um bloco ou esse subtítulo É UM BLOCO?

[fdaciuk]

Não entendi muito bem a dúvida.. a marcação ficaria algo nesse sentido:

<div class="container">
  <h2 class="container__title">Título</h2>
  <span class="container__text">Texto</span>
</div>

[woliveiras]

@fdaciuk, eu estou tentando melhorar a pergunta aqui com o @teles e está osso de explicar! kkkkkkkk

[Cleysonlb]

@woliveiras já que ele aparece nesse caso e em outro sem o texto do lado joga um modificador nesse caso do subtítulo com texto do lado, acho que encaixa bem nesse caso

[fdaciuk]

Ah, acho que entendi.. o subtítulo pode ser um "bloco" sim. Se o texto vai dentro do título, você pode fazer:

<div class="container">
  <h2 class="container__title">
    Título
    <span class="container__text">Texto</span>
  </h2>
</div>

Não é obrigatório o uso da classe no span.. você pode colocar como filho do h2 ou não, ou seja com a classe container__title__text ou somente container__text, se for aparecer em outro lugar sem o título. Não sei se entendi muito bem a dúvida ainda xD

<div class="container">
  <h2 class="container__title">
    Título
    <span class="container__text">Texto</span>
  </h2>
</div>

No caso acima, você usa a herança do H2 pra estilizar o SPAN.. se o estilo for muito diferente, você pode colocar um SPAN no texto Título e estilizar ele separado do text. Ae você monta como achar que fica mais claro xD

EDIT: Ou usa a dica do @Cleysonlb xD

[woliveiras]

A dúvida está bem nesse esquema de container...

Pra estilizar esse h2 (ou h1, h2, h3) eu vou sempre precisar do <div class="container"> ou tem como eu estilizar diretamente esses h1, h2, h3 como blocos ou elementos?

Eles ficariam dependentes de uma class container?

Para contextualizar melhor: Estamos planejando a estrutura desde as bases de um site um pouco complexo e estamos na parte de planejar a tipografia.

[fdaciuk]

Você pode sim estilizar as tags com um estilo mínimo padrão, e depois ir acrescentando estilos, conforme a marcação vai ficando mais específica =)

[leandroruel]

@woliveiras dá uma olhada nesse Blocss http://blocss.github.io/blocss/

[woliveiras]

Eita lasqueira! Ai sim. Valeu @leandroruel

[felipefialho]

Não fecha não @woliveiras, a ideia é as discussões estarem sempre abertas \o

[woliveiras]

Eita, foi mal mano! Eu entrei no meu perfil e fui fechando as issues. kkkk

[diessica]

Acho legal fechar, pois a dúvida foi bem específica.

[felipefialho]

Alias, resolveu o problema @woliveiras ?

[woliveiras]

Opa, resolveu sim @lfeh

Deu uma boa clareada nos pensamentos. :D