Organize seu CSS com SMACSS, BEM e SASS

Gente, é importantíssimo escrever um código limpo, organizado e de fácil entendimento. SIM mesmo sendo CSS.

Não sei o que dá na cabeça das pessoas que “acham” que CSS pode ser feito de qualquer forma, que pelo fato de não ser uma linguagem de programação não há necessidade de padrões. Pra que eu vou gastar meu tempo organizando essa porcaria? Vamos parar com esse tipo de pensamento queridos? Vamos organizar TUDO SIM.

Quem nunca deu manutenção em um projeto com apenas um arquivo CSS com aquele tanto de !important, cheio daquelas classes com nomes impossíveis de entender? Cara, não pense no seu próprio umbigo, com certeza alguém irá mexer no seu código futuramente e vai pensar :

-“Que merda é essa?”

But, se você é uma pessoa que mantém seu código organizado, independentemente ela vai pensar:

-“Nem conheço esse dev, mas já considero pacas!”

CSS é vida, CSS é arte! Então escreva esse trem direito, escreva com AMOR!

SMACSS

Pra que nunca ouviu falar o SMACSS é basicamente uma arquitetura, dividida em 5 camadas (diretórios). Sendo eles:

• Base
• Layout
• Module
• State
• Theme

A ideia é criar os seus arquivos CSS e colocá-los em cada pasta de acordo com a sua função. Vou explicar cada uma dessas camadas (diretórios) para melhor entendimento.

Base

Aqui você não irá colocar nenhuma classe ou id, apenas seletores e pseudo-classes. Sabe aquele reset maroto que costumamos usar? Pra remover margin, padding pois cada navegador possui um valor diferente? Aqui é o local ideal para você colocar! Você também pode estilizar todas as suas listas de forma global, veja alguns exemplos:

* { box-sizing: border-box; }
ul { list-style: none; }
a { text-decoration: none; }

Layout

Para o layout devemos pensar nos principais componentes como cabeçalho, rodapé, entre outros.

.header, .article, .footer { 
   width: 1160px;    
   margin: auto; 
} 

Module

Podemos entender a camada Module como componentes, por exemplo, botões ou alertas, partes realmente reutilizáveis dentro do seu app e que poderão ser usadas em mais de um lugar.

State

Todo elemento que será modificado ou terá alguma alteração no seu estado inicial, ficará na camada State. Veja alguns exemplos:

.hidden
.visible
.selected
.active

Theme

Essa camada não é muito utilizada, mas o seu objetivo é definir temas específicos, vamos imaginar o seguinte cenário: um sistema possui 3 tipos de usuários: bronze, prata e ouro. Cada perfil terá uma estilização diferente.. Essa atribuição de cores, tipografia e etc deverá ser feito na camada Theme.

BEM

Vou confessar que a primeira vez que eu li sobre BEM e vi a sua sintaxe achei bem esquisto, porém depois de utilizar em alguns projetos, percebi o quanto é útil .

B (Bloco)

É o tipo de abstração mais alta, é a classe pai de um componente. Exemplo:

.menu

E (Elemento)

É o elemento filho de um componente. É necessário repetir o nome da classe pai(bloco) logo após adicionar dois underscore /underline com a função da sua classe. Exemplo:

.menu__title

M (Modificador)

É uma característica de um elemento ou bloco que diferencia do padrão. No meu exemplo estou alterando o elemento, por isso há necessidade de repetir o bloco, o elemento e adicionar dois hífens para o modificador. Exemplo:

.menu__title--underline

Se por algum acaso estivesse modificando o menu(bloco) iria utilizar dessa forma aqui:

.menu--hidden

Usando BEM com SASS

Abaixo temos um exemplo de como estruturar o BEM dentro do SASS. Não vou explicar a fundo pois é um assunto bem comentado que praticamente todas as empresas e devs utilizam. Porém se tiverem mais interesse deixo aqui o link :)

.menu {
  &__title {
    &--underline {
    }
  }
}

Pra quem não sabe o & é uma técnica utilizada no SASS para você escrever menos. Ele concatena a string no escopo pai com a string sequente ao &. No caso o resultado desse código seriam as classes:

.menu {}  
.menu__title {}
.menu__title--underline {}
    

Então é isso! Beijos de purpurina! ❤