CSS Módule
Ajuda a não gerar conflito com outras partes do projeto,
que tenha uma classe com o mesmo nome.
Exemplo:
Você tem dentro do seu projeto o arquivoA.css e o arquivoB.css,
dentro dele tem configurações diferentes para uma classe com o nome "Title".
E no html, existe uma classe com o nome Title,
se for um css normal, vai dá conflito um vai sobreescrever o outro.
Se for CSS MODULE não terá conflito, pois quando for feito o build
essa classe recebera uns números para diferenciar elas.
É um processo que ocorre no processo de build,
que altera o nome de classe e seletores para ter escopo local.
Geralmente feito por JavaScript.
Vem para sanar problemas como dependências, eliminação de código morto,
e classes globais.
É mais vantajoso usar em projeto grandes.
Em projetos pequenos pode aumentar a complexidade de forma desnecessária.
Exemplo prático de CSS Módule
*Cria uma pasta, abra o VScode, e no terminal dele digite:
// Comando para criar um projeto react
npm install create-react-app
// Novamente cria outro passando o nome para o projeto:
npx create-react-app meu-app-css-modules
Depois de instalado ele vai criar esses arquivos:
Depois de instalado, para rodar o programa, no terminal coloque:
cd + o nome do seu projeto, para entrar na pasta do seu projeto.
Agora dentro da pasta do seu projeto, coloque:
npm start *para rodar o programa.
No código do programa, vamos alterar o App.css,
mude o nome para App.module.css .
Agora vai no App.js e vamos importa ele aqui.
* Para importa:
import estilo from './App.module.css';
* Para adicionar:
< div className={estilo.App} < /div >
* Para adicionar os que tenham " hífem ",tipo; "App-header" :
< header className= { estilo [ 'App-header' ] } > < /header >
Veja na imagem como fica o código:
Outro Exemplo de como usar o CSS Módule
Usando o mesmo projeto que você criou.
Faça uma cópia do arquivo App.module.css
E depois modifique o nome dele para:
NovoCss.module.css
Apague quase tudo de dentro dele, deixe somente o:
App-header
* modifique a cor, o background-color.
Para adicionar essas modificações:
* importa ele no "App.js" :
import novoEstilo from './NovoCss.module.css'
* Para usar ela:
< header className= { novoEstilo['App-header'] } > < /header >
Veja na imagem como fica o código:
