Save 37% off PRO during our Black Friday Sale! »

Conhecendo a abordagem Utility First com tailwind css

Conhecendo a abordagem Utility First com tailwind css

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

D8a5a663020f14bc3030ee1ec1c5c6a7?s=128

Emanuel G

August 20, 2019
Tweet

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