Conhecendo a abordagem Utility First com tailwind css

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

5. None

6. Abordagem funcional

7. None

8. Utility First possui um sinônimo: Functional CSS. O que isso

   pode significar?
9. None

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

29. None