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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

December 19, 2019
Tweet

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!