CSS Modules
[!info] Leituras - https://github.com/css-modules/css-modules - https://dev.to/gmantovani97/porque-utilizar-css-modules-no-react-1a93
O que é?¶
- Uma forma de dar escopo aos arquivos CSS.
- É escrito igual arquivos de CSS normais.
- É adicionado um hash na classe na hora da compilação, fazendo com que a classe seja única:
ID: ID_l9oy
Number of Columns: 2
Largest Column: standard
- Sem module:
--- column-end ---
- Com module:
=== end-multi-column
ℹ Se você usou
create-react-app
provavelmente você já está habilitado para usar o CSS Modules.
Usando ele¶
- Crie um arquivo com a extensão
.module.css
:
/* App.module.css */
.className {
color: green;
}
- Para usar as classes, basta importar ele.
- O arquivo exporta um objeto mapeado com todas as classes.
import styles from "./App.module.css";
// import { className } from "./App.module.css";
element.innerHTML = '<div class="' + styles.className + '">';
Nomeando¶
- Dê preferência para usar camelCase invés de kebab-case por ser mais fácil de usar.
/* Exemplos */
style['class-name']
style.className
Estilos globais¶
- Você pode usar
:global
parar criar estilos globais.
:global {
.global-class-name {
color: green;
}
}
Composição/herança¶
- Você pode usar composição para fazer uma classe herdar de outra.
.className {
color: green;
background: red;
}
.otherClassName {
composes: className;
color: yellow;
}
/* Composição de outros arquivos */
.otherClassNameTwo {
composes: className from "./style.css";
}