Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Conhecendo a abordagem Utility First com tailwi...

Avatar for Emanuel G Emanuel G
August 20, 2019

Conhecendo a abordagem Utility First com tailwind css

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

Avatar for Emanuel G

Emanuel G

August 20, 2019
Tweet

More Decks by Emanuel G

Other Decks in Technology

Transcript

  1. Utility First busca, também, aplicar os conceitos da programação funcional

    no contexto do CSS, tais como composição e imutabilidade
  2. 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...
  3. vs

  4. É 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)
  5. 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.
  6. Uma consideração A abordagem é Utility First, não Utility Only.

    Portanto, uma excelente dica para o seu projeto é: use componentização!
  7. 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