Arquitetura de CSS

Introdução

Você já trabalhou em algum projeto frontend onde o CSS foi crescendo gradualmente e se tornou um emaranhado de linhas que você já não sabe mais o que significam?

É difícil saber quais estilos afetam o que HTML. Pequenas alterações de um lado corrigem um problema, mas em outro criam mais vinte problemas e podem exigir gambiarras horrendas. Todos nós já passamos por isso, mas esses são problemas que podem ser evitados em grande parte com um planejamento cuidadoso no início de nossos projetos.

Por isso, vamos falar sobre arquitetura de CSS.

O que é arquitetura de CSS?

Arquitetura de CSS é um conjunto de guias de boas práticas que ajudam as pessoas a escreverem códigos CSS que são de fácil manutenção, escaláveis e reutilizáveis, trazendo raciocínio à escrita do código.

Para ter esse código maravilhoso que acabamos de falar, aplicamos uma abordagem modular, promovendo a organização e transmitindo significado à nossa base de código.

Aqui temos que frisar que modularidade é um conceito-chave não apenas à nível de código mas também à nível de design, já que a complexidade de construir produtos digitais aumentou ao longo do tempo já que precisamos levar em conta diversos dispositivos e responsividade.

Em uma arquitetura CSS, a modularidade pode ser aplicada em vários níveis, que podemos definir em três etapas básicas:

• Quebrar o código em pedaços menores e separá-los por escopo;
• Codificar componentes de forma independente e encapsulada;
• Nomeando seletores CSS de acordo com seu propósito e relacionamento entre si.aa

Objetivos de uma arquitetura de CSS

Podemos listar os objetivos de uma arquitetura de CSS sendo:

• Previsível
• Reutilizável
• Fácil manutenção
• Escalável

Vamos falar com um pouco mais de detalhes sobre cada uma desses objetivos.

Previsível

Esse objetivo significa que as regras de CSS se comportam da maneira que você espera. Bem simples, né?

Reutilizável

As regras CSS devem ser abstratas e desacopladas o suficiente para que você possa construir novos componentes rapidamente a partir de partes existentes sem ter que recodificar padrões e problemas que você já resolveu.

Fácil manutenção

Quando novos componentes e recursos precisam ser adicionados, atualizados ou reorganizados em seu site, isso não deve exigir a refatoração do CSS existente. Adicionar o componente X à página não deve quebrar o componente Y por sua mera presença.

Escalável

CSS escalável significa que pode ser facilmente gerenciado por uma única pessoa ou uma grande equipe de engenharia. Isso também significa que a arquitetura CSS do seu site é facilmente acessível sem exigir uma enorme curva de aprendizado.

Metodologias de arquitetura de CSS

Existem diversas metodologias sendo utilizadas, mas podemos destacar algumas:

• Object Oriented CSS (OOCSS);
• Scalable and Modular Architecture CSS (SMACSS);
• Block Element Modifier (BEM);
• Utility First.

Vamos nos aprofundar um pouco em cada uma dessas metodologias.

Object Oriented CSS (OOCSS)

CSS Orientado a Objetos (OOCSS) é a base conceitual para um melhor design e desenvolvimento de interface, onde as interfaces são feitas de vários componentes, que devem ser reutilizados o máximo possível.

Semelhante à programação orientada a objetos, o OOCSS se concentra em componentes flexíveis e reutilizáveis, cada um fazendo uma coisa bem, partindo do princípio de que deve haver uma separação da estrutura e o visual, assim como uma separação do container e conteúdo.

Podemos usar o exemplo de que quando vamos reutilizar um design de botão semelhante em toda a interface, os usuários se familiarizam com ele e o aplicativo fica mais intuitivo a cada nova sessão.

Com o OOCSS, estamos apenas reutilizando o código, tornando mais rápido e fácil criar mais coisas, sem adicionar uma sobrecarga significativa à base de código.

Podemos utilizar a orientação a objetos para fazer diversas versões de um mesmo componente usando a mesma estrutura e base (mudando apenas o visual, como cor, caixa alta ou caixa baixa, ícone, tamanho, etc.).

Scalable and Modular Architecture CSS (SMACSS)

A metodologia é baseada em cinco principais categorias: base, layout, module, state e theme.

Vamos ver um pouco de cada uma dessas categorias.

Base

A base é aplicada a seletores de elementos sem o uso de classes ou IDs, também inclui pseudo-classes e filhos usando apenas seletores de elementos.

Isso define o estilo padrão da página, mesmo sem colocar nenhuma classe.

Layout

O layout é onde colocaremos os estilos das estruturas que não se repetem na página como header, footer, sidebar, main e todo resto que não é componente ou estrutura reutilizável.

Utiliza o padrão de nomenclatura l- ou layout-.

Module

O módulo é responsável por determinar as partes reutilizáveis, os componentes.

Dentro do módulo, são declarados componentes como botões, lightbox, alertas, menu de navegação, widgets, estilos de blocos de texto, entre outros.

State

O estado determina o estado do elemento, que será modificado ou terá alguma alteração, seja ela feita por JavaScript, ou por ser uma marcação daquela página.

Todo estado recebe o prefixo .is- para diferenciar das outras classes, mostrando assim que ela determina um estado modificado daquele elemento.

Theme

O tema é a parte que menos tem aplicação na maioria dos projetos, é usada para separar a parte que dá um novo design para a página.

Define um conjunto de estilos como cores, backgrounds, imagens e até font-family, mas pensando na possibilidade em que terá mais de uma versão do mesmo site ou aplicação e não na estilização de um único design.

Block Element Modifier (BEM)

É uma metodologia com várias versões, cujo o preceito é de esclarecer a pessoa que está desenvolvendo mais sobre o markup através de suas classes. Ela permite escrever sites de maneira rápida, autoexplicativa e com manutenção descomplicada.

Vamos ver o que cada palavra significa nessa metodologia.

Block

É uma entidade independente da aplicação, podendo ser o mais alto nível de abstração (header, footer) ou componente (graph, tabs).

Element

É um descendente dependente de um block que possui uma certa função. Para permitir nomes compostos e evitar ambiguidades, o padrão estabelece o controverso __ como separador.

Modifier

Define o modifier como uma propriedade de um block ou element que altera sua aparência. Desta maneira, o block .menu poderia ser acrescido da classe *.menusize_big,* note o uso do ponto).

Uma das falhas desse padrão de arquitetura é não possuir categorias como as do SMACSS.

Segundo o padrão, o estado de um componente deve ser endereçado como um modifier, não havendo uma categoria de estado.

Um exemplo de nomenclatura de classe CSS usando a metodologia BEM é .report-graph_barsize_big.

Utility First

Basicamente é a abordagem de escrita e uso do CSS em que se procura, primeiramente, fazer uso das chamadas classes utilitárias, classes estas que representam atributos do CSS, como border, background, border-radius e uma série de outras propriedades. Como você constrói suas classes usando apenas uma propriedade por vez, raramente será necessário sobrescrever uma propriedade (você usa composição ao invés de herança).

Utility First é uma abordagem para escrita e uso do CSS, em que você se preocupa, em primeiro lugar, na escrita de classes que alterem apenas uma propriedade do CSS, de maneira que no seu HTML você só precise compor seus elementos usando essas classes.

Essa abordagem possui inúmeros sinônimos: Immutable CSS, Functional CSS, Atomic CSS, dentre outros.

// Classe CSS pura

<h4 class="chat-notification-title">ChitChat</h4>

// Classes CSS usando Utility First

<div class="text-xl font-medium text-black">ChitChat</div>

Conclusões

Tendo em vista tudo o que foi dito nesse artigo, podemos tirar algumas conclusões:

• CSS não é apenas design visual.
• Não jogue fora as melhores práticas de programação só porque você está escrevendo CSS. Conceitos como OOP, DRY, o princípio aberto/fechado, separação de interesses, etc. ainda se aplicam ao CSS.
• Faça o que tenha que fazer para organizar seu código e certifique-se de avaliar se os métodos que você está utilizando realmente ajudam ou não a tornar seu desenvolvimento mais fácil e mais sustentável a longo prazo.
• Não existe uma bala de prata em arquitetura de CSS! A melhor arquitetura é aquela que é melhor aplicada para o contexto do projeto e para a equipe.