Styled Components

Styled Components

Evento: LabTalks

Apresentação introdutória que demonstra a utilização dos styled componentes. Por baixo dos panos, funcionamento da API, configuração, prós e contras e

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

August 02, 2018
Tweet

Transcript

  1. Styled Components CSS na era dos Componentes

  2. A Evolução

  3. A Evolução • Evolução do CSS • Evolução de como

    nós construímos interfaces
  4. CSS Tools

  5. Pré-processadores CSS Tools

  6. lesscss.org

  7. sass-lang.com

  8. stylus-lang.com

  9. Pós-processadores CSS Tools

  10. postcss.org

  11. React styling solutions

  12. Vanilla CSS React Styling Solutions

  13. None
  14. None
  15. • Não precisa de nenhuma ferramenta nem configuração para funcionar

  16. • Não precisa de nenhuma ferramenta nem configuração para funcionar

    • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS • Utiliza-se de classes como: is-active, js-active • Adoção de padrões como BEM • Manutenção é bem difícil
  17. Inline Styles React Styling Solutions

  18. None
  19. • Não precisa de nenhuma dependência extra, ou processo de

    build • Javascript “puro" • Permite uma dinâmica entre CSS e JS
  20. • Não precisa de nenhuma dependência extra, ou processo de

    build • Javascript “puro" • Permite uma dinâmica entre CSS e JS • Não é uma prática recomendável • Não tem todos os recursos do CSS (hover, before) • Imagina a manutenção..
  21. CSS Modules React Styling Solutions

  22. None
  23. None
  24. • Não precisa se preocupar com os nomes das classes

    • Altera as classes para terem nomes únicos (.khjen) • O componente é o escopo da classe • Permite a utilização de um processador CSS (pré/pós)
  25. • Não precisa se preocupar com os nomes das classes

    • Altera as classes para terem nomes únicos (.khjen) • O componente é o escopo da classe • Permite a utilização de um processador CSS (pré/pós) • Só resolve um único problema do CSS que é não ter escopo para as classes • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS
  26. Styled Components React Styling Solutions

  27. None
  28. • O JS é transformado em CSS • Qualquer coisa

    que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes)
  29. • O JS é transformado em CSS • Qualquer coisa

    que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes) • Será adicionada uma nova dependência ao projeto • Requer um investimento em estudo
  30. <StyledComponents />

  31. Sobre Styled Components

  32. Sobre • Funciona em projetos que já possuem um CSS

    • Você consegue aumentar a especificidade de um estilo existente • É compatível com o ecossistema React • Template literal ES6 é onde está o pulo do gato
  33. Por baixo dos panos…

  34. Por baixo dos panos… • Tagged Template Literals • Nova

    funcionalidade que veio no ES6 • styled.button`` || styled.button()
  35. Instalação Styled Components

  36. Instalação

  37. Instalação

  38. API Styled Components

  39. styled.tagname

  40. styled(Component)

  41. styled.tagname`css`

  42. styled.tagname.attrs({})

  43. – Eu “Todo o código encontra-se no codesandbox”

  44. Alternativas Styled Components

  45. emotion.sh

  46. glamorous.rocks

  47. cssinjs.org

  48. github.com/Khan/aphrodite

  49. Tips and Tricks Styled Components

  50. github.com/styled-components

  51. Is a good idea to have CSS in JS?

  52. stop-using-css-in-javascript-for-web-development

  53. Obrigado!