SASS e BEM

Este artigo explica SASS e BEM.

Vamos explicar os conceitos e métodos de implementação para evitar a confusão e a fragilidade que tendem a ocorrer quando o CSS cresce em larga escala, usando SASS e BEM, com exemplos concretos.

YouTube Video

SASS e BEM

À medida que o número de arquivos e telas aumenta, o CSS tende a enfrentar problemas como 'Não sei onde esse estilo está definido' e 'Uma pequena alteração quebrou a aparência em outra tela.'.

Isso ocorre porque o CSS é intrinsecamente uma linguagem que não impõe regras de design. Se você continuar escrevendo assim, as dependências não intencionais vão aumentar.

SASS e BEM são técnicas práticas para transformar o CSS de algo escrito de forma ad hoc em algo projetado e gerenciável, prevenindo assim esses problemas. Ao combinar os dois, você pode esclarecer o significado dos estilos e, ao mesmo tempo, melhorar a legibilidade, reutilização e manutenção.

Razões pelas quais o CSS facilmente se torna difícil de gerenciar

CSS como o exemplo a seguir pode se tornar difícil de entender como se comporta quando você revisita o código mais tarde.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• Neste exemplo, a mesma classe .title parece diferente dependendo de onde está situada, então você não pode saber instantaneamente qual estilo será aplicado a essa .title.
• Dessa forma, à medida que os seletores se tornam mais profundos e dependentes dos elementos-pai, o CSS se torna mais difícil de prever o escopo de influência e tende a quebrar quando modificado.

BEM é uma convenção de nomenclatura que 'expressa papéis por meio dos nomes'

BEM significa Bloco / Elemento / Modificador, e inclui no nome qual componente a classe representa e em que estado se encontra.

• Bloco é um componente independente.
• Elemento é um elemento interno do Bloco.
• Modificador se refere a um estado ou variação.

1.card {}
2.card__title {}
3.card--highlighted {}

Com esta convenção de nomes, você pode inferir a estrutura e o papel apenas olhando para o HTML.

Forma básica de HTML usando BEM

Aqui está um exemplo de uma interface de cartão expressa em HTML usando BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Somente pelos nomes das classes, você pode entender que este é um 'componente card', 'title dentro dele' e o 'estado enfatizado'. Esta é a maior vantagem do BEM.

No entanto, o BEM sozinho pode resultar em CSS prolixo.

Se você escrever BEM como está no CSS, a quantidade de código tende a aumentar.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Aqui, ao usar SASS, você pode ter código organizado que mantém a estrutura.

Expresse BEM de forma natural com o aninhamento do SASS

Ao usar o aninhamento do SASS, você pode refletir a estrutura do BEM diretamente no seu código.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& se refere ao seletor pai e funciona muito bem com a nomenclatura BEM.

CSS gerado a partir deste SASS

O SASS acima é compilado em CSS como o seguinte.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Mesmo com a aparência igual, a carga cognitiva para o desenvolvedor é significativamente reduzida.

Projetando para o uso seguro de Modificadores

Como os Modificadores no BEM representam 'estados', o segredo é limitá-los para uso apenas em sobrescritas.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

O design se torna mais estável se os Modificadores forem tratados não como 'adições', mas como 'alterações'.

Limite o aninhamento de Elementos a um nível

No BEM, é importante não aninhar elementos muito profundamente.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Elementos de vários níveis como .card__header__title são um sinal de que você deveria considerar dividir o Bloco.

Um exemplo de estrutura de arquivos SASS

Por fim, aqui está um exemplo de estrutura SASS que é prática para projetos reais.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Se você gerenciar cada componente como 1 bloco = 1 arquivo, é menos provável que haja problemas.

Exemplo de card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Como tudo está contido nesta unidade, exclusão, movimentação e reutilização se tornam fáceis.

Resumo

SASS e BEM não são apenas técnicas modernas—são abordagens práticas para transformar CSS em um código projetável.

• BEM nomeia o significado e o papel.
• O SASS permite uma escrita fácil mantendo a estrutura.
• Combinar ambos torna o CSS menos propenso a quebras.

Vamos escrever o CSS hoje de uma forma que seu eu futuro possa entender.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video