21 de outubro de 2023

Visão Geral das Arquiteturas CSS: OCSS, SMACSS e BEM

CSS

Introdução

O CSS é uma linguagem de marcação assim como o HTML. Ela é uma das primeiras tecnologias que exploramos ao iniciar no desenvolvimento web, justamente por ser simples e ter um resultado visual imediato na tela. Entretanto, apesar de ser simples, a estrutura do CSS num projeto deve ser muito bem organizada. Dado que facilmente podemos se perder em meio a tantas classes, seletores e folhas de estilos que sobrescrevem o que não deveria, ou não apresentam efeito quando deveriam.

Por esse motivo surgiram vários modelos de arquiteturas CSS, algumas que ditam regras a serem seguidas e outras apenas recomendações e guias. Vou comentar sobre as três principais:

OOCSS (Object-Oriented CSS).
SMACSS.
BEM.

Só vamos se atentar que, nenhuma arquitetura suprime a boa comunicação e convenções de códigos estabelecidas pelo seu time ainda nos primórdios do projeto.

OOCSS - CSS Orientado a Objetos.

Essa metodologia foi proposta por Nicole Sullivan, em 2008. O seu objetivo era aplicar conceitos de POO já conhecidos, principalmente através das linguagens Java e C#.

Desse modo podemos abstrair as pequenas partes de um site em objetos e estilizá-los independente de sua localização. Isso porque um dos conceitos de OOCSS é criar uma nova classe específica para cada novo tipo de elemento que você quer.

As duas premissas para criar as classes são:

Separar a estrutura do estilo.
Separar o container do conteúdo.

Assim, podemos reutilizar melhor as estilizações de forma mais específica.

Estrutura vs Estilo

Abaixo há um exemplo de separação entre estrutura e estilo.

/* ESTRUTURA */
.btn {
    padding: 10px 15px;
    border: 1px solid gray;
}
/* ESTILO */
.greenScheme {
    border-color: rgb(14, 143, 14);
    background-color: green;
}
.greenScheme:hover {
    border-color: rgb(14, 143, 14);
    background-color: rgb(14, 90, 14);
}

Container vs Conteúdo

Em adição, Sullivan sugere a separação entre o container e conteúdo para evitar ao máximo a dependência de localização do objeto na árvore de renderização do HTML - o famoso DOM, Document Object Model -. Lembre-se que é uma boa prática manter um elemento com a mesma aparência, não importa onde estiver.

Por exemplo, ao invés de estilizar todos os links dentro de footer...

.footer a { /* styles */ }

…podemos fazer algo mais flexível e específico.

.external-link { /* styles */ }

Alguns outros detalhes importantes

Evite usar IDs.
Evite citar tags HTML dentro do arquivo CSS. Use classes.
Evite usar seletor descendente (como explicado no último exemplo).
Apenas use !important em casos extremos.

SMACSS

Agora vamos falar de SMACSS (lê-se smacks). Foi criado por Jonathan Snook. O autor tem um livro sobre e uma excelente documentação.

Conforme o guia, as regras CSS têm 5 categorias: base, layout, module, state e theme.

Base

São estilos comuns ou iniciais dos elementos, levando em consideração todo o projeto. Exemplo:

Cor de fundo e texto comum.
Estilo padrão de links e listas.
“Resets” do CSS.
Box-sizing.

Algo como abaixo. (E sim, eu usei o seletor universal).

* {
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}

html,
body,
button,
textarea,
input {
	  @media (max-width: 768px) {
        font-size: 93.75%;
    }    
		@media (max-width: 425px) {
        font-size: 87.50%;
    }
}

Layout (estrutura)

Geralmente as classes dessa categoria podem ser prefixas com “l-”. Aqui vão entrar header, footer, main, aside, etc.

.layout {
    display: grid;
		grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 4em 1fr 4em;
    gap: 0px 0px;
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer"
;}

#aside { grid-area: aside; }
#main { grid-area: main; }
#header { grid-area: header; }
#footer { grid-area: footer; }

Module

A parte mais funcional do site, específicos e reutilizáveis. Aqui vamos estilizar botões, links, drawers, listas, entre outros. São a maioria dos elementos.

State (Estado)

Nessa parte são os estilos relacionados a um “estado”, como estar selecionado, estar ativo, ou qualquer outra condição. Aqui há uma estreita relação com Javascript para aplicar ou retirar esses estilos dinamicamente. Comumente são usados prefixos como “is-” e “has-” na nomenclatura de classes.

.is-selected {
    color: red;
}
.is-active {
    font-weight: 700;
}
.has-search-value {
    border: 1px dashed green;
}

Theme

Estilos que dependem da preferência do usuário. Essa parte é bem opcional, pois nem todos os projetos têm escolha de temas (dark/light), estilo de listagem (tabela/lista/grade), entre outros.

Importante ressaltar que SMACSS não te dita regra alguma, é apenar um guia.

Uma opção de estrutura de pastas pode ser a seguinte:

  ├── base.scss
  ├── layout.scss
  └── module
    ├── home.scss
    └── about.scss
  ├── state.scss
  └── theme.scss

BEM

BEM foi criado pela Yandex, uma empresa russa com um mercado gigante em serviços para web. O principal propósito dessa estrutura é dividir a interface em pequenos blocos independentes. Assim podem ser reutilizados e não causar efeitos indesejados além do seu escopo.

BEM é um acrônimo para Block, Element, Modifier. Que são três partes que podemos dividir uma interface do usuário.

Block (Bloco)

Blocos são elementos reutilizáveis e independentes de uma página. Pense num bloco como um módulo do SMACSS ou um grande componente. O seu nome deve ser o seu propósito e não sua aparência. Para ilustrar, um Header é considerado um bloco.

A sua estilização não pode modificar o que está do lado de fora.

Element (Elemento)

Um elemento deve fazer parte do bloco, pois não tem função fora deste. Os links dentro do Header e a Logo são os elementos do bloco Header.

Modifier (Modificador)

Uma variação ou extensão do bloco. Um link ativo seria um modificador específico do Header.

Nomenclatura

A nomenclatura é a parte mais marcante de BEM. Você vai saber que um projeto usa BEM no exato momento que bater o olho num arquivo CSS. O nome do bloco descreve sua função/propósito, o elemento é prefixo com “__“ e o modificador com “—”.

/* .[Block]__[Element]--[Modifier] */

.header { }
.header__link { }
.header__link--active { }

Conclusão

Estas são apenas 3 das estratégias de manter os códigos CSS organizados conforme aumente sua complexidade. Agora que você viu uma geral sobre cada uma delas, escolha qual te agrada mais, explore a documentação e comece a pôr em prática. Bons estudos! 👋

Referência

Home · stubbornella/oocss Wiki (github.com)

Home - Scalable and Modular Architecture for CSS (smacss.com)

BEM.info

Voltar para todos os artigos