CSS na era dos Componentes

Evento: Meetup React Recife

Talk introdutória que aborda a utilização do CSS no React com Styled Components.

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
8. 1998 CSS2
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
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
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
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
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
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.
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!