BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.

1. Arquitetura de CSS
por Mionzinho

2. –Success, Customer
“CSS??”

3. –Back-end, dev
“Arquitetura em CSS????”

4. O que seria
arquitetura?

5. Antes de falar de
arquitetura de CSS, vamos
falar de padrões de CSS.

6. Nomenclatura
Estrutura de pastas
Modularização

7. Agora sim!
Arquiteturas de CSS

8. DRY
Don’t repeat yourself

9. Construa classes mais genéricas
Não duplique código

10. OOCSS
CSS Orientado à Objetos

11. Separação da estrutura e do visual
Cada classe com sua responsabilidade bem
específica
Código modular
Não utilize a cascata

12. BEM
Block, element, modifier

13. Verboso (auto explicativo)
Nomenclatura definida
Reaproveitamento de código
Composição de componentes

14. SMACSS
base, layout, module, state, theme

15. É mais um styleguide do que um framework
Componentes bem definidos, ou seja,
independente do lugar o comportamento é o
mesmo
Nomenclatura definida

16. –Carmo, Matheus
“Existem várias arquiteturas e padrões, o
importante é usar algum.”

17. Links
Medium CSS is actually pretty fucking good
OOCSS - SMACSS - BEM - DRY
SMACSS
BEM
OOCSS