Arquitetura CSS (BEM - OOCSS - Functional CSS - CSS in Js) - PT
Tags: css, architecture, webdev, frontend
Published: 2023-05-04 00:51:40

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_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm1064p1rbgg3ob6rqam.png)

---
##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/](https://www.linkedin.com/in/gustavoscarpim/)
GitHub: [https://github.com/guscarpim](https://github.com/guscarpim)
Portfolio: [https://gustavoscarpim.com/](https://gustavoscarpim.com/)