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

CSS na era dos Componentes

CSS na era dos Componentes

Evento: Meetup React Recife

Talk introdutória que aborda a utilização do CSS no React com Styled Components.

Thulio Philipe

December 19, 2019
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. CSS na era dos
    Components
    101

    View Slide

  2. Quem Sou
    • Designer por formação
    • Front-end é a minha
    profissão
    • Segurança e Animação
    • Ciclista desse mundão!

    View Slide

  3. Agenda
    1. A Evolução do CSS
    2. Processadores CSS
    3. Como usar CSS no React
    4. Styled Components

    View Slide

  4. A Evolução

    View Slide

  5. 1996
    CSS1

    View Slide

  6. View Slide

  7. View Slide

  8. 1998
    CSS2

    View Slide

  9. View Slide

  10. 2011
    CSS2.1

    View Slide

  11. • Relações parent-child (nth-child, last, first)
    • Múltiplas classes no mesmo elemento
    • Início do responsive design (font-size-adjust)

    View Slide

  12. 2018
    CSS4

    View Slide

  13. View Slide

  14. Processadores
    CSS

    View Slide

  15. Pré-processadores
    Processadores CSS

    View Slide

  16. lesscss.org

    View Slide

  17. stylus-lang.com

    View Slide

  18. sass-lang.com

    View Slide

  19. Pós-processadores
    Processadores CSS

    View Slide

  20. postcss.org

    View Slide

  21. Como usar CSS
    no React?

    View Slide

  22. Vanilla CSS
    React e CSS

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

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

    View Slide

  27. • Não precisa de nenhuma
    ferramenta nem
    configuração para
    funcionar
    • Para manipulação de
    diferentes estilos, é
    necessário alternar entre
    classes CSS.

    View Slide

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

    View Slide

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

    View Slide

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

  31. Inline Styles
    React e CSS

    View Slide

  32. View Slide

  33. View Slide

  34. • Não precisa de nenhuma
    dependência extra, ou
    processo de build.

    View Slide

  35. • Não precisa de nenhuma
    dependência extra, ou
    processo de build.
    • Javascript “puro”.

    View Slide

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

    View Slide

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

    View Slide

  38. • 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).

    View Slide

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

  40. CSS Modules
    React e CSS

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. • Não precisa se preocupar
    com os nomes das classes.

    View Slide

  45. • Não precisa se preocupar
    com os nomes das classes.
    • Altera as classes para
    terem nomes únicos
    (.khjen).

    View Slide

  46. • Não precisa se preocupar
    com os nomes das classes.
    • Altera as classes para
    terem nomes únicos
    (.khjen).
    • O componente é o escopo
    da classe.

    View Slide

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

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

    View Slide

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

  50. Styled Components
    React e CSS

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. • O JS é transformado em
    CSS.

    View Slide

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

    View Slide

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

    View Slide

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

  58. View Slide


  59. View Slide

  60. Sobre
    • Funciona em projetos que já possuem um CSS.
    • É compatível com o ecossistema React.
    • Permite criar componentes, apenas definindo seus estilos.
    • Estilos dinâmicos baseados nas props ou temas.

    View Slide

  61. Instalação

    View Slide

  62. Instalação

    View Slide

  63. API
    Styled Components

    View Slide

  64. styled.tagname

    View Slide

  65. styled(Component)

    View Slide

  66. styled(Component)

    View Slide

  67. styled.tagname`css`

    View Slide

  68. styled.tagname`css`

    View Slide

  69. styled.tagname.attrs({})

    View Slide

  70. styled.tagname.attrs({})

    View Slide

  71. Por baixo do capô

    View Slide

  72. Por baixo do capô
    • Tagged Template literals ou Template Strings

    View Slide

  73. medium.com/styled-components/how-styled-components-works

    View Slide

  74. – Linus Torvalds
    “Talk is cheap. Show me the code”

    View Slide

  75. Alternativas
    Styled Components

    View Slide

  76. emotion.sh

    View Slide

  77. glamorous.rocks

    View Slide

  78. cssinjs.org

    View Slide

  79. github.com/Khan/aphrodite

    View Slide

  80. Tips and Tricks
    Styled Components

    View Slide

  81. github.com/styled-components/tips-and-tricks.md

    View Slide

  82. É uma boa idéia
    CSS-in-JS?

    View Slide

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

    View Slide

  84. Referências
    • w3.org/Style/CSS/specs
    • styled-components.com
    • developer.mozilla.org/pt-BR/docs/Web/CSS
    • blogs.adobe.com/creativecloud/the-evolution-of-css
    • medium.com/styled-components/how-styled-components-
    works
    • medium.com/@perezpriego7/css-evolution-from-css-
    sass-bem-css-modules-to-styled-components

    View Slide

  85. – Eu
    Obrigado!

    View Slide