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

  2. Quem Sou • Designer por formação • Front-end é a

    minha profissão • Segurança e Animação • Ciclista desse mundão!
  3. Agenda 1. A Evolução do CSS 2. Processadores CSS 3.

    Como usar CSS no React 4. Styled Components
  4. A Evolução

  5. 1996 CSS1

  6. None
  7. None
  8. 1998 CSS2

  9. None
  10. 2011 CSS2.1

  11. • Relações parent-child (nth-child, last, first) • Múltiplas classes no

    mesmo elemento • Início do responsive design (font-size-adjust)
  12. 2018 CSS4

  13. None
  14. Processadores CSS

  15. Pré-processadores Processadores CSS

  16. lesscss.org

  17. stylus-lang.com

  18. sass-lang.com

  19. Pós-processadores Processadores CSS

  20. postcss.org

  21. Como usar CSS no React?

  22. Vanilla CSS React e CSS

  23. None
  24. None
  25. None
  26. • Não precisa de nenhuma ferramenta nem configuração para funcionar.

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

    • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS.
  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.
  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.
  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.
  31. Inline Styles React e CSS

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

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

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

    build. • Javascript “puro”. • Permite uma dinâmica entre CSS e JS.
  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.
  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).
  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..
  40. CSS Modules React e CSS

  41. None
  42. None
  43. None
  44. • Não precisa se preocupar com os nomes das classes.

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

    • Altera as classes para terem nomes únicos (.khjen).
  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.
  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).
  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.
  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.
  50. Styled Components React e CSS

  51. None
  52. None
  53. None
  54. • O JS é transformado em CSS.

  55. • O JS é transformado em CSS. • Qualquer coisa

    que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes).
  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.
  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.
  58. None
  59. <StyledComponents />

  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.
  61. Instalação

  62. Instalação

  63. API Styled Components

  64. styled.tagname

  65. styled(Component)

  66. styled(Component)

  67. styled.tagname`css`

  68. styled.tagname`css`

  69. styled.tagname.attrs({})

  70. styled.tagname.attrs({})

  71. Por baixo do capô

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

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

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

  75. Alternativas Styled Components

  76. emotion.sh

  77. glamorous.rocks

  78. cssinjs.org

  79. github.com/Khan/aphrodite

  80. Tips and Tricks Styled Components

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

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

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

  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
  85. – Eu Obrigado!