Atomic CSS: amado e odiado

Hoje irei escrever um pouco sobre o amado e odiado framework Atomic CSS.

O Atomic CSS é um framework CSS desenvolvido pelo Yahoo em 2015 e promete acabar com alguns problemas como: especificidade, inchaço e redundância nos nossos códigos CSS.

Como no código CSS inline, ele oferece unidades de estilo de propósito único, mas aplicado através de classes. Seria basicamente como se escrevêssemos o nosso código CSS através de classes.

Exemplo:

• Fz(40px) equivale a font-size: 40px;
• C(#666) equivale a color: #666;
• Fw(b) equivale a font-weight: bold;
• Fz(40px) equivale a font-size: 40px;
• C(#07f) equivale a color: #07f;

O Atomic CSS usa o Atomizer e é gerado dinamicamente o seguinte arquivo CSS com as classes Atomic que você realmente está usando em seu projeto (sem estilos não utilizados!):

Outros exemplos de classe x declaração CSS:

• Bdc(<valor> ou <parâmetro>) equivale a border-color: valor;
• Bgi(<parâmetro>) equivale a background-image: valor;
• Bgc(<valor> ou <parâmetro>) equivale a background-color: valor;
• Bdrs(<valor> ou <parâmetro>) equivale a border-radius: valor;
• D(n) equivale a display: none;
• D(b) equivale a display: block;
• Ff(<parâmetro>) equivale a font-family: valor;
• H(<valor> ou <parâmetro>) equivale a height: valor;
• Mb(<valor> ou <parâmetro>) equivale a margin-bottom: valor;
• W(<valor> ou <parâmetro>) equivale a width: valor;

Confira todas as relações classe x declaração CSS: https://acss.io/reference.

Prós

O uso do Atomic CSS traz muitos benefícios:

• Estilos CSS altamente reutilizáveis;
• Sem estilos CSS não utilizados;
• Organização e diminuição de gerenciamento de folhas de estilo;
• Possibilidade de usar variáveis;
• Os componentes são portáteis;
• Sistema de Grids;

Contras

O Atomic CSS também é odiado por muitos, o uso dele traz um grande número de problemas:

• As classes Atomic são difíceis de ler;
• O Grande número de classes pode se tornar um problema;
• O Atomic CSS “recria” o CSS no HTML;
• É difícil de usar as pseudo classes;
• Todo elemento precisa de classe;
• Dificuldade em manipular através de Javascript/jQuery;

Outros contras e problemas apontados com argumentação, você pode ler no seguinte link: https://medium.com/simple-human/the-problem-with-atomic-css-d0c09c7aa38e

Cases

Além do Yahoo, “pai” do Atomic CSS, muitas outras grandes empresas estão usando o Atomic CSS.

Um outro grande case é o Tinder, onde os detalhes você pode ler no seguinte link: https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

Conclusão

Apesar dos inúmeros benefícios trazidos pelo uso do Atomic CSS, muitos são os aspectos a serem levados em conta na hora de decidir pelo uso do mesmo. Deve ser colocado na balança seus prós e contras de acordo com o projeto a ser desenvolvido.

Abraços e até o próximo artigo!