SMACSS – Scalable and Modular Architecture for CSS

O SMACSS – Scalable and Modular Architecture for CSS – é um conjunto de práticas que estrutura o desenvolvimento de estilos escaláveis e modulares. Assim, ao dividir o CSS em camadas distintas, o SMACSS promove uma melhor organização do código, facilitando sua manutenção e reutilização em diferentes partes do projeto.

Além desse, aqui no blog temos diversos artigos sobre desenvolvimento, arquitetura de software e afins. É possível que te interesse ler também As 10 leis da usabilidade, Acessibilidade Web e CSS para o BEM.

SMACSS – Scalable and Modular Architecture for CSS

O SMACSS é um conjunto de práticas que ajuda a organizar o CSS e a percebe-lo como um conjunto de camadas com responsabilidades bem definidas. Note que ele se considera uma arquitetura, portanto trata-se de um design de sistemas focado na estruturação dele. Assim ele é dividido em 5 partes principais: base, layout, módulo, estado e tema.

1 – Base

Então, a primeira parte é a base: nela as regras mais gerais e abrangentes são definidas. Assim, seletores de elemento ou atributo, pseudo-classes, etc. fazem parte. Alguns exemplos de referência são reset css, normalize css, basic front boilerplate: esses são casos que fariam parte dessa camada.

2 – Layout

Essa segunda camada diz respeito a estruturas abrangentes de layout. Alguns exemplos claros são header, footer, main, etc. Mas note que o padrão orienta que se use IDs e não classes para representar essas estruturas, embora o padrão seja relativamente flexível. Particularmente prefiro seguir com classes, mesmo fugindo à regra.

.layout-footer { ... }
.l-footer { ... }

3 – Módulo (Module)

A terceira camada diz respeito aos módulos ou componentes do sistema. Para conceituar, no sentido do SMACSS, componente é a menor unidade portável de uma interface. De maneira geral módulos estão contidos dentro de layouts (camada 2) e se refere a partes menos abrangentes. Podemos ter como exemplos: cards, menus, blocos de conteúdo, etc.

Agora, o SMACSS proibe que se utilize IDs em módulos e deve-se evitar o uso de posicionamentos, margens, paddings, dimensões, etc. Essas características devem ser do layout. Entretanto pode haver situações muito particulares que as dimensões estejam no módulo, como, por exemplo, uma logo (mas nada impede de ter isso definido no layout também.)

Já os módulos também possuem uma lei de formação específica, podendo ser:

.module-card { ... }
.m-card { ... }
.component-card { ... }
.c-card { ... }

4 – Estado (State)

Já o estado representa características opcionais, transitórias e particulares de estruturas. Por exemplo estar ativo ou não, estar oculto, estar brilhando, entre outros. Entretanto um estado pode ser global, aplicável a qualquer estrutura do CSS ou local, aplicável apenas a um módulo, layout, etc.

/* Estado geral, aplicável a qualquer estrutura */
.is-active { ... }
.is-featured { ... }

/* Estado de um módulo específico. No caso o módulo card */
.is-card-active { ... }

5 – Tema (Theme)

Os temas são a camada mais específica, que representa uma espécie de skin do sistema. Imagine que a aplicação está pronta, mas ela pode ter uma temática especial para o Natal, por exemplo. Nesse caso o uso de tema é algo adequado.

Veja que há duas potenciais abordagens para isso. Uma é a criação de um arquivo CSS para o tema natalino que sobrescreve as classes que deseja. Assim, ele funciona naturalmente pela cascata. Mas é possível também trabalhar com uma classe particular para o natal e alterar o HTML para lidar com isso. Isso fica a gosto do freguês.

Screaming architecture

Para fechar o assunto sobre o SMACSS, devemos levar em consideração que essa estrutura deverá ser organizada em diferentes arquivos. Isso é fundamental para que o design seja gritante para quem olhar o sistema. Veja que é possível trabalhar com vários arquivos .css puros (recomenda-se fazer bundles aglutinando tudo num só arquivo) ou usar pré-processadores de css.

E nesse sentido a separação em pastas é algo que recomendo fortemente. Há apenas uma consideração específica: quando um estado (camada 4) representa um módulo (camada 3), essa informação deve estar na pasta do módulo e não na pasta state. Já na pasta state deve-se ter os estados gerais disponíveis.

Conclusão de SMACSS – Scalable and Modular Architecture for CSS

Implementar o SMACSS – Scalable and Modular Architecture for CSS, em projetos frontend pode trazer diversos benefícios, desde uma maior organização e clareza no código CSS até uma melhor performance e facilidade de manutenção. Ao seguir as práticas recomendadas pelo SMACSS, os desenvolvedores podem criar interfaces mais consistentes, flexíveis e fáceis de manter, contribuindo para a qualidade e eficiência do desenvolvimento frontend.