$30 off During Our Annual Pro Sale. View Details »

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

Thulio Philipe

August 02, 2018
Tweet

More Decks by Thulio Philipe

Other Decks in Technology

Transcript

  1. Styled Components
    CSS na era dos Componentes

    View Slide

  2. A Evolução

    View Slide

  3. A Evolução
    • Evolução do CSS
    • Evolução de como nós construímos interfaces

    View Slide

  4. CSS Tools

    View Slide

  5. Pré-processadores
    CSS Tools

    View Slide

  6. lesscss.org

    View Slide

  7. sass-lang.com

    View Slide

  8. stylus-lang.com

    View Slide

  9. Pós-processadores
    CSS Tools

    View Slide

  10. postcss.org

    View Slide

  11. React styling solutions

    View Slide

  12. Vanilla CSS
    React Styling Solutions

    View Slide

  13. View Slide

  14. View Slide

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

    View Slide

  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

    View Slide

  17. Inline Styles
    React Styling Solutions

    View Slide

  18. View Slide

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

    View Slide

  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..

    View Slide

  21. CSS Modules
    React Styling Solutions

    View Slide

  22. View Slide

  23. View Slide

  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)

    View Slide

  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

    View Slide

  26. Styled Components
    React Styling Solutions

    View Slide

  27. View Slide

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

    View Slide

  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

    View Slide


  30. View Slide

  31. Sobre
    Styled Components

    View Slide

  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

    View Slide

  33. Por baixo dos panos…

    View Slide

  34. Por baixo dos panos…
    • Tagged Template Literals
    • Nova funcionalidade que veio no ES6
    • styled.button`` || styled.button()

    View Slide

  35. Instalação
    Styled Components

    View Slide

  36. Instalação

    View Slide

  37. Instalação

    View Slide

  38. API
    Styled Components

    View Slide

  39. styled.tagname

    View Slide

  40. styled(Component)

    View Slide

  41. styled.tagname`css`

    View Slide

  42. styled.tagname.attrs({})

    View Slide

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

    View Slide

  44. Alternativas
    Styled Components

    View Slide

  45. emotion.sh

    View Slide

  46. glamorous.rocks

    View Slide

  47. cssinjs.org

    View Slide

  48. github.com/Khan/aphrodite

    View Slide

  49. Tips and Tricks
    Styled Components

    View Slide

  50. github.com/styled-components

    View Slide

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

    View Slide

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

    View Slide

  53. Obrigado!

    View Slide