CSS Modules permite escrever CSS de forma modular e escopada com a mesma sintaxe de CSS puro. Isso evita conflitos de nomes de classes e permite compor seletores e classes de forma flexível, com escopo local ou global opcional. Ao usar CSS Modules, o tamanho do bundle final é menor do que CSS sem modularização.

1. CSS Modules
https://github.com/css-modules/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
< / >

8. E usando CSS
Modules?
8

9. 9
button.scss
button.js
< / >

10. 10
< / >
title.scss
title.js

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
< / >

16. Compondo seletores
16
< / >

17. 17
< / >

18. Compondo seletores
18
< / >

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
< / >

26. Gostei, quero usar!
26

27. Instalar o css-loader
no seu projeto
27
< / >
Geralmente usamos o webpack para configurar o CSS
Modules

28. 28
webpack.config.js

29. 29
webpack.config.jswebpack.config.js

30. 30

31. Perguntas?
laryssamagal@gmail.com
31