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

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

    minha profissão • Segurança e Animação • Ciclista desse mundão!
  2. 3.

    Agenda 1. A Evolução do CSS 2. Processadores CSS 3.

    Como usar CSS no React 4. Styled Components
  3. 6.
  4. 7.
  5. 9.
  6. 11.

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

    mesmo elemento • Início do responsive design (font-size-adjust)
  7. 12.
  8. 13.
  9. 23.
  10. 24.
  11. 25.
  12. 27.

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

    • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS.
  13. 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.
  14. 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.
  15. 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.
  16. 32.
  17. 33.
  18. 36.

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

    build. • Javascript “puro”. • Permite uma dinâmica entre CSS e JS.
  19. 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.
  20. 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).
  21. 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..
  22. 41.
  23. 42.
  24. 43.
  25. 45.

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

    • Altera as classes para terem nomes únicos (.khjen).
  26. 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.
  27. 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).
  28. 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.
  29. 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.
  30. 51.
  31. 52.
  32. 53.
  33. 55.

    • O JS é transformado em CSS. • Qualquer coisa

    que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes).
  34. 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.
  35. 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.
  36. 58.
  37. 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.
  38. 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