Quem possui alguma experiência trabalhando com CSS, provavelmente já teve dificuldade para atingir um resultado esperado, ou se frustrou pra fazer alguma coisa. Até aqui, nada fora do comum.

1. AS DIVERSAS FORMAS DO
CSS Moderno.
Uriell Viana

3. Antes do CSS:

5. Só que, alguns dos
problemas da época,
acontecem até hoje.

6. 3 Problemas
persistentes
do CSS:
Namespace global•
Arquivos muito
grandes
•
Isolamento•

7. Mas como esses problemas
foram resolvidos?

8. Metodologias
comumente
utilizadas:
SMACSS
Guia & boas práticas
Escalável & modular
•
OOCSS
Estrutura !== aparência
Princípio de responsabilidade única
•
BEM
Escopo controlado
Estrutura simples e robusta
•

9. Veio a necessidade de fazer
MORE with LESS

10. Pré-
processamento
de CSS:
SASS
sass-lang.com
•
LESS
lesscss.org
•
Stylus
stylus-lang.com
•

11. Com isso veio o hype de
variáveis, aninhamento,
mixins e funções.

12. Mas nós acabamos
duplicando código

13. Por exemplo...

14. HTML estruturado com o BEM:

15. CSS feito na sintaxe do SASS:

16. Resultado do SASS anterior:

17. Então, precisamos
reduzir nossos estilos!

18. Pós-
processamento
de CSS:
PurgeCSS
Remoção de código não utilizado.
•
Stylelint
Análise estática de código.
Indica potenciais problemas.
•
PostCSS
Um mundo de transformações e
plugins pra estender seu CSS.
•

19. Mas então...
Metodologias, pré & pós processadores
resolveram os 3 problemas, certo?

20. Sim,
mas e na prática?

21. CSS no Vue:

22. CSS Inline no React:

23. Trazendo pro lado do React,
o que é mais popular?

24. Exemplo do JSS:

25. Resultado gerado pelo CSS Modules:

26. github.com/stereobooster/css-in-js-101

27. CSS in JS:

28. O que o CSS Funcional resolve:

29. Agora abra sua mente,
essa proposta é uma
quebra de paradigmas.

30. A proposta do CSS Funcional:

31. Mas nenhuma é
melhor que a outra.

32. E podem ser combinadas:

33. Concluindo,
qual foi o ganho?
Atacamos 3 dos maiores
problemas em qualquer
aplicação;
•
Conhecemos a maioria
das soluções relevantes
no mercado pra CSS;
•
Descobrimos alguns
prós, contras e pontos de
atenção na hora de
aplicar.
•

34. Links:
Metodologias:
SMACSS
OOCSS
BEM
Pré-processadores:
SASS
LESS
Stylus
Pós-processadores:
PurgeCSS
Stylelint
PostCSS
Bibliotecas:
CSS Modules
CSS in JS 101
CSS Funcional
•
•
•
•
•
•
•
•
•
•
•
•

35. Obrigado!
in.uriell.dev
github.uriell.dev
modern-css.uriell.dev