Conhecendo a abordagem Utility First com tailwind css

Conheça o conceito de Utility First com a biblioteca Tailwind

Transcript

1. Conhecendo a abordagem Utility First com tailwind css
2. Emanuel Gonçalves @emanuelgsouza @emanuelgsouza @emanuelgsouza Desenvolvedor na Decision6
3. Mas o que raios é a abordagem Utility First?
4. Abordagem clássica
6. Abordagem funcional
8. Utility First possui um sinônimo: Functional CSS. O que isso pode significar?
10. Utility First busca, também, aplicar os conceitos da programação funcional no contexto do CSS, tais como composição e imutabilidade
11. Vantagens
12. Abandone o uso de nomes para seus componentes e assim esqueça a dor de cabeça que é nomear classes. Esqueça BEM, OOCSS, SMACSS...
13. Estilize suas páginas sem escrever uma linha de código CSS
14. Não tenha problemas com escalabilidade de suas folhas de estilo
15. Qualquer mudança, se torna fácil (com componentização…)
16. Discussões ao redor dessa abordagem Baseado em “In Defense of Utility First”
17. Eu posso usar CSS Inline Classes utilitárias definem uma API muito mais amigável
18. vs
19. É insuportável manter o código É fato que classes utilitárias irão encher o seu HTML de código. Porém, você só está trocando a dificuldade de local. Pois a carga de código pode ir para o CSS (convencional) ou para o HTML (functional)
20. Continuação Perceba que você poderá ter uma repetição de código a nível de CSS… Juntar a composição com classes que apenas tem uma responsabilidade, previne isso.
21. Uma consideração A abordagem é Utility First, não Utility Only. Portanto, uma excelente dica para o seu projeto é: use componentização!
22. Enfim, o Tailwind CSS
23. Criando um card
24. Abordagem convencional
25. Abordagem funcional
26. Configurando o Tailwind
27. Referências Site oficial do Tailwind.css In Defense of Utility First OOCSS, SMACSS, BEM, DRY CSS: afinal, como escrever CSS? Codepen criado para os exemplos dos cards Talk bacana sobre CSS Funcional da Pagar.me In Defense of Utility First de Sarah Dayan CSS Utility Classes and Separation of Concerns de Adam Wathan Rationalizing Functional CSS de Marcelo Somers
28. Encontre essa apresentação facilmente