Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. Quem Sou • Designer por formação • Front-end é a

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

    Como usar CSS no React 4. Styled Components
  3. • Relações parent-child (nth-child, last, first) • Múltiplas classes no

    mesmo elemento • Início do responsive design (font-size-adjust)
  4. • Não precisa de nenhuma ferramenta nem configuração para funcionar

    • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS.
  5. • 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.
  6. • 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.
  7. • 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.
  8. • Não precisa de nenhuma dependência extra, ou processo de

    build. • Javascript “puro”. • Permite uma dinâmica entre CSS e JS.
  9. • 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.
  10. • 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).
  11. • 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..
  12. • Não precisa se preocupar com os nomes das classes.

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

    • Altera as classes para terem nomes únicos (.khjen). • O componente é o escopo da classe.
  14. • 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).
  15. • 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.
  16. • 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.
  17. • O JS é transformado em CSS. • Qualquer coisa

    que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes).
  18. • 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.
  19. • 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.
  20. 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.
  21. 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