Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

SASS + BEM + SMACSS

Referente ao curso Arquitetura CSS: descomplicando os problemas

por Jair Aureliano dos Santos Junior
| 319.7k xp | 51 posts

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__imagem
BEM / 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 :)

1 resposta
solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala ai Jair, tudo bem? Vamos lá:

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.

Não irei dizer a "melhor", mas, irei te dar dois cenários.

O primeiro seria exatamente como você fez, criar um arquivo por contexto e dentro dele concatenar com &__.

O problema é realmente como você disse, pode ser que esse único arquivo fique muito extenso.

Sendo assim, você pode criar uma pasta e dentro dela quebrar em vários arquivos.

banner
  _banner-titulo.scss
  _banner-imagem.scss
  banner.scss

E dentro do seu banner.scss você importaria dos outros dois:

import "./banner-titulo"
import "./banner-imagem"

Detalhe: O _ no começo dos arquivos é para dizer ao SASS não compilá-los individualmente, ou seja, não compilar arquivos .css para eles e sim apenas para o banner.scss que seria a junção de todos.

Tem um projeto bem antigo que eu fiz algo assim: https://github.com/mahenrique94/stilize/tree/master/sass/component/table

Dá uma olhada na estrutura dele, talvez algo possa te ajudar.

Espero ter ajudado.