CSS Modules
- 2. hello! @laryssamagalhaes Front end developer, mineira, fã de Harry Potter e louca por doguinhos <3 2
- 3. 3
- 4. O que é CSS Modules? 4
- 5. ✘ É um conjunto de padrões que te permite escrever CSS de forma modular e escopado com a mesma sintaxe de CSS puro. ✘ É um mix de CSS e CSS in JS. 5
- 6. CSS in Js 6 < / >
- 7. Escrevendo um objeto e passando para o style 7 < / >
- 11. 11 < / > header.js header.scss
- 12. 12 < / > header.js header.scss
- 13. Benefícios 13
- 14. ✘ É possível escrever classes com nomes repetidos SEM conflitos. ✘ É possível compor seletores e classes. ✘ Sem escopo global (há não ser que você queira). ✘ O bundle final vai ser bem menor. 14
- 15. SEM CONFLITOS 15 < / >
- 17. 17 < / >
- 19. 19 < / >
- 20. Compondo de outro arquivo 20 < / > font.scss title.scss
- 21. ESCOPO GLOBAL (caso queira) 21 < / > Sem SASS
- 22. ESCOPO GLOBAL (caso queira) 22 < / > Usando SASS
- 23. ESCOPO LOCAL DENTRO DE UM GLOBAL 23 < / >
- 24. BUNDLE FINAL < / > Exemplo real de um arquivo main.css SEM CSS Modules: 505KB COM CSS Modules: 151KB
- 25. BUNDLE FINAL 25 < / >
- 27. Instalar o css-loader no seu projeto 27 < / > Geralmente usamos o webpack para configurar o CSS Modules
- 30. 30