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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. A Evolução

    View full-size slide

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

    View full-size slide

  6. Processadores
    CSS

    View full-size slide

  7. Pré-processadores
    Processadores CSS

    View full-size slide

  8. stylus-lang.com

    View full-size slide

  9. sass-lang.com

    View full-size slide

  10. Pós-processadores
    Processadores CSS

    View full-size slide

  11. Como usar CSS
    no React?

    View full-size slide

  12. Vanilla CSS
    React e CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. • 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 full-size 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.

    View full-size slide

  17. • 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 full-size slide

  18. Inline Styles
    React e CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. • 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 full-size slide

  23. • 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 full-size slide

  24. • 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 full-size slide

  25. CSS Modules
    React e CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. • 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 full-size slide

  29. • 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 full-size slide

  30. • 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 full-size slide

  31. • 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 full-size slide

  32. Styled Components
    React e CSS

    View full-size slide

  33. • O JS é transformado em
    CSS.

    View full-size slide

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

    View full-size slide

  35. • 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 full-size slide

  36. • 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 full-size slide

  37. 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 full-size slide

  38. Instalação

    View full-size slide

  39. Instalação

    View full-size slide

  40. API
    Styled Components

    View full-size slide

  41. styled.tagname

    View full-size slide

  42. styled(Component)

    View full-size slide

  43. styled(Component)

    View full-size slide

  44. styled.tagname`css`

    View full-size slide

  45. styled.tagname`css`

    View full-size slide

  46. styled.tagname.attrs({})

    View full-size slide

  47. styled.tagname.attrs({})

    View full-size slide

  48. Por baixo do capô

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Alternativas
    Styled Components

    View full-size slide

  53. glamorous.rocks

    View full-size slide

  54. github.com/Khan/aphrodite

    View full-size slide

  55. Tips and Tricks
    Styled Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

  60. – Eu
    Obrigado!

    View full-size slide