Arquitetura CSS (BEM - OOCSS - Functional CSS - CSS in Js) - PT

Ao falar sobre arquitetura de software, geralmente nos concentramos na arquitetura do frontend ou backend, mas há uma arquitetura igualmente importante que os desenvolvedores muitas vezes negligenciam: a arquitetura CSS.

Embora muitas pessoas acreditem que o CSS seja apenas um conjunto de regras de estilo visual, a verdade é que ele também precisa ser organizado e estruturado de maneira clara e coerente para garantir a manutenção e evolução do código a longo prazo.

A arquitetura CSS envolve a definição de padrões e diretrizes para a organização, nomenclatura e estruturação das regras de estilo, com o objetivo de criar um código coeso e sustentável. As técnicas mais utilizadas incluem o uso de metodologias como BEM, OOCSS, CSS Funcional e CSS-in-js, que propõem maneiras de dividir o código em módulos reutilizáveis e independentes, além do uso de pré-processadores como Sass e Less, que permitem escrever CSS de maneira mais modular e dinâmica.

Uma boa arquitetura de CSS pode trazer muitos benefícios para um projeto, como a redução de duplicação de código, maior facilidade de manutenção, aumento da produtividade da equipe e melhorias significativas na performance da aplicação. Por isso, é importante valorizar a arquitetura de CSS e investir em boas práticas de organização e estruturação do código.

Aqui está uma imagem que resumo um pouco as características sobre cada uma delas:

Fonte: PUC

BEM Style Guide

O BEM (Block-Element-Modifier) é um Style Guide onde não precisamos de uma lib externa e possuí uma compatibilidade com qualquer tipo de frameworks, ela serve para padronizar nomes de classes:

• Block: Header, Container, Menu, Checkbox, Input...
• Element: Menu item, list item, titulo de cabeçalho...
• Modifier: Disabled, Active, Fixed...

Exemplo:

<style>
.main-nav {...}
.main-nav__item {...}
.main-nav__item--is-active {...}
</style>

<nav class="main-nav" >
  <li class="main-nav__item">Item menu</li>
  <li class="main-nav__item--is-active">Item menu Active</li>
</nav>

Prós:

• Organização clara e intuitiva
• Reutilização
• Nomenclatura padronizada e consistente
• Escalabilidade

Contras:

• Muito verbose
• Uso excessivo de BEM pode levar a uma redundância de código
• A necessidade de definir muitas classes pode levar a um aumento do tamanho do arquivo CSS

OOCSS Style Guide

OOCSS (Object Oriented CSS) é uma metodologia de desenvolvimento de CSS que se concentra na criação de classes reutilizáveis e independentes de contextos específicos. A ideia é separar as propriedades de estilo em classes que podem ser aplicadas a qualquer elemento no HTML, independentemente do contexto em que aparecem.

O objetivo do OOCSS é criar um código CSS escalável, sustentável e fácil de manter. Ele busca reduzir as duplicações de códigos, melhorar a legibilidade do código e permitir a criação de novos estilos de forma mais eficiente.

Exemplo:

<style>
.button {
  font-size: 14px;
  font-weight: 600;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

.button--secondary {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff;
}

.button--alert {
  background-color: #dc3545;
  color: #fff;
}
</style>

<button class="button button--primary">primary</button>
<button class="button button--secondary">secondary</button>
<button class="button button--alert">alert</button>

OOCSS é uma metodologia de escrita de CSS, não uma biblioteca ou framework. Porém, algumas bibliotecas CSS adotam os princípios do OOCSS:

• Bootstrap
• Foundation
• Semantic UI
• Materialize CSS
• Bulma

Prós:

• Reutilização de código
• Flexibilidade
• Escalabilidade
• Manutenção

Contras:

• Curva de aprendizado
• Complexidade
• Inconsistência
• Tamanho do arquivo

CSS Funcional Style Guide

Esse Style Guide utiliza micro classes, para compor outros componentes, cada micro classe altera uma única propriedade do CSS.

Exemplo:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em;
}

.col {
  flex: 1;
  margin: 0 0.5em;
}

Algumas bibliotecas que utilizam o CSS Funcional:

• Tachyons
• Tailwind CSS
• Basscss
• Functional CSS
• Primer CSS

Prós:

• Redução do tamanho do arquivo CSS
• Reutilização de estilos
• Flexibilidade
• Clareza

Contras:

• Curva de aprendizado alta
• Dificuldade de controle
• Limitações
• Necessidade de planejamento

Style-in-JS Style Guide

Esse Style Guide é a técnica de estilização utilizando Javascript. Em vez de separar o CSS em um arquivo externo ou incorporá-lo em um documento HTML separado, o estilo é criado e aplicado diretamente no componente usando uma biblioteca ou framework de estilo em JavaScript.

Exemplo utilizando Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  &:hover {
    background-color: #0069d9;
  }
`

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  )
}

Algumas bibliotecas que utilizam CSS-IN-JS:

• styled-components
• Emotion
• JSS
• Glamorous
• Radium

Como melhorar a performance do seu código css

• Evitando overrides de estilos repetidos
• Evitar sempre de utilizar !important porque ele causa um número de re-render na fase de "Painting"
• Reduza o tamanho do arquivo CSS
• Use seletores específicos
• Utilize arquivos separados
• Minimize o número de reflows e repaints
• Utilize técnicas de cache
• Sempre utilize técnicas de otimização de imagens

Espero que tenha agregado em algo.

Autor: Gustavo Scarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/
GitHub: https://github.com/guscarpim
Portfolio: https://gustavoscarpim.com/