Olá, galera ! Gostaria de tirar uma dúvida em relação a utilização da metodologia BEM e SMACSS junto com SASS para obter uma melhor organização do código.
No curso, o instrutor faz a separação por pastas, algo como:
BEM / SMACSS - Organização do HTML/CSS
.banner
.banner__titulo
.banner__imagemBEM / SMACSS - Organização das pastas do projeto
css
|
|__banner
|
|__ banner.css
|__ banner-titulo.css
|__ banner-imagem.css A dúvida ficou em como encaixar esses modelos junto ao SASS. Inicialmente pensei na utilização da escrita em um só arquivo para cada componente / modulo e utilizar o nesting junto com"&" para facilitar o trabalho no SASS, algo como:
.banner{
// Alguma estilização do pai / Block
&__imagem{
// Alguma estilização de um filho / Element
}
&__titulo{
// Alguma estilização de um filho / Element
}
}No entanto, essa abordagem geraria apenas um arquivo na pasta e quebraria a ideia de dividir em vários arquivos menores organizados por pastas / modulos (que segundo o instrutor, facilitaria a manutenção).
SASS- Organização das pastas do projeto
css
|
|__banner.scss
x|
x|__ banner.css
x|__ banner-titulo.css
x|__ banner-imagem.css Gostaria de saber qual seria a melhor forma de abordar a organização dos arquivos, assim como a integração / dicas / boas práticas de integração do SASS + BEM + SMACSS.
Desde já agradeço a todos que contribuirão :)
