This content originally appeared on DEV Community and was authored by Gustavo Scarpim
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/
This content originally appeared on DEV Community and was authored by Gustavo Scarpim
Gustavo Scarpim | Sciencx (2023-05-04T00:51:40+00:00) Arquitetura CSS (BEM – OOCSS – Functional CSS – CSS in Js) – PT. Retrieved from https://www.scien.cx/2023/05/04/arquitetura-css-bem-oocss-functional-css-css-in-js-pt/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.