[BEM] Organização de pastas e arquivos

[Luana-silva]

Estou estudando sobre BEM, e procurando criar uns projetos enquanto estudo, e a minha dúvida é sobre a organização de pastas e arquivos. Como vocês organizam?

[kvnol]

@Luana-silva, tivemos uma issue bem bacana aqui no fórum sobre Estruturas de diretórios.

[Luana-silva]

Obrigada, não tinha visto, mas ainda não tira as minhas dúvidas. 😋

[kvnol]

Poxa, então vamos esperar outras respostas.

[leandroruel]

uso essa nomenclatura fabulosa aqui https://willianjusten.com.br/organizando-seu-css-com-itcss/

[felipefialho]

@Luana-silva Tenho usado BEM nos últimos dois ou três anos e gosto bastante dessa metodologia.

Uma das coisas que precisamos ter em mente, é que BEM é uma metodologia de nomenclatura para encapsular componentes, portanto é totalmente agnóstico quanto a metodologia de pastas ou organização que vamos utilizar.

Digo isso, porque até hoje utilizo Atomic CSS para nomenclatura das pastas em projetos estáticos.

Porém essa abordagem se torna muito verbosa para usar junto com um SPA por exemplo, onde apenas tenho uma pasta components.

[leandroruel]

@lfeh e no caso de um SPA tu faz como? css dentro de cada componente?

[felipefialho]

Cada componente tem sua pasta e lá ficam todas as configurações e arquivos dele. Exemplo:

├── components\button
   ├── button.styl
   ├── button.ts
   ├── button.html

Porém é importante dizer que existem técnicas interessante que caem muito bem em SPAs, como CSS Modules, Styled Components ou mesmo o Component Styles do Angular.

Essas técnicas já garantem que seu CSS ficará isolado e consistente sem depender de metodologias.

[Luana-silva]

Eu tava imaginando algo como
├── /block - Pasta com elementos em bloco
├── _header.css - Apenas os elementos em bloco do header.css

E na raiz todos os elementos dentro dos blocos, por exemplo:
header.css - Os elementos que ficam dentro dos blocos

Aí, por exemplo, no _header.css eu teria algo como
.menu

E no header.css algo como
.menu__item

Ficaria totalmente bagunçado, né?

[felipefialho]

Então, a organização tem que primeiramente fazer sentido pra você e seu time.

Mas a primeira vista, me parece bom na verdade. O único adendo que faria é condicionar toda a estrutura desse CSS ao seu arquivo principal.

Ou seja, você começa o arquivo com

.header

E toda a estrutura depois fica condicionado ao header.

.header__menu
.header__menu__item
.header__menu__item__link

[AlexsandroSA]

O smacss é bem legal!! ;)

[leandroruel]

@Luana-silva se fizer desse jeito, até da certo, mas ai vai ter um probleminha, e as configurações? variaveis, mixins, e etc? eo normalize? e se tiver CSS de terceiros? e se precisa sobrescrever?

[Luana-silva]

@leandroruel , então pra isso eu tinha pensado num base.css na raiz do projeto com alguma configurações, daí tbm na raiz um reset.css, e css de terceiros(ou o css de terceiros numa página plugins)

[felipefialho]

@Luana-silva Eu faço isso, crio um variables.styl (ou global.styl).

Para terceiros, deixo uma pasta \vendors

[Luana-silva]

Antes eu havia pensado em criar uma pasta chamada Elements(assim como tem a blocks), onde só ficariam os elementos ao invés de ficarem na raiz.

Eu fiz um pequeno projeto da forma que citei no meu segundo comentário, e não tive nenhum problema de algo ficar sobreescrito. Não estou usando nenhum alinhamento quando faço alguma estilização

[ygorcosta]

@Luana-silva dá uma sacada aqui https://cssguidelin.es/
Se vc quiser ver na pratica tudo que fala no cssguidelines, dá uma sacada aqui https://github.com/inuitcss/inuitcss

BEM é bem legal, mas hoje em dia estou preferindo fazer um merge com este cara aqui -
http://rscss.io/variants.html - principalmente para a variantes

[Luana-silva]

Eu pesquisei algumas metodologias, não gostei muito à primeira vista do rscss, e o BEM foi o que eu achei mais organizado(apesar de sujar um pouco o html)

[ygorcosta]

Não gosto de tudo dele (rscss), assim como não gosto de tudo do BEM, mas procuro tirar o melhor de cada um e tentar fazer algo melhor. =)

[mahenrique94]

Eu criei meu padrão, misturo BEM com SMACSS, me atende muito bem.