Styled Components

Evento: LabTalks

Apresentação introdutória que demonstra a utilização dos styled componentes. Por baixo dos panos, funcionamento da API, configuração, prós e contras e

Transcript

1. Styled Components CSS na era dos Componentes
2. A Evolução
3. A Evolução • Evolução do CSS • Evolução de como nós construímos interfaces
4. CSS Tools
5. Pré-processadores CSS Tools
6. lesscss.org
7. sass-lang.com
8. stylus-lang.com
9. Pós-processadores CSS Tools
10. postcss.org
11. React styling solutions
12. Vanilla CSS React Styling Solutions
15. • Não precisa de nenhuma ferramenta nem configuração para funcionar
16. • 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
17. Inline Styles React Styling Solutions
19. • Não precisa de nenhuma dependência extra, ou processo de build • Javascript “puro" • Permite uma dinâmica entre CSS e JS
20. • 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..
21. CSS Modules React Styling Solutions
24. • 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)
25. • 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
26. Styled Components React Styling Solutions
28. • O JS é transformado em CSS • Qualquer coisa que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes)
29. • 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
30. <StyledComponents />
31. Sobre Styled Components
32. Sobre • Funciona em projetos que já possuem um CSS • Você consegue aumentar a especificidade de um estilo existente • É compatível com o ecossistema React • Template literal ES6 é onde está o pulo do gato
33. Por baixo dos panos…
34. Por baixo dos panos… • Tagged Template Literals • Nova funcionalidade que veio no ES6 • styled.button`` || styled.button()
35. Instalação Styled Components
36. Instalação
37. Instalação
38. API Styled Components
39. styled.tagname
40. styled(Component)
41. styled.tagname`css`
42. styled.tagname.attrs({})
43. – Eu “Todo o código encontra-se no codesandbox”
44. Alternativas Styled Components
45. emotion.sh
46. glamorous.rocks
47. cssinjs.org
48. github.com/Khan/aphrodite
49. Tips and Tricks Styled Components
50. github.com/styled-components
51. Is a good idea to have CSS in JS?
52. stop-using-css-in-javascript-for-web-development
53. Obrigado!