CSS Avançado

Menu

Próxima página
Página anterior

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:
print da tela do programa mostrando os arquivos que foram criados.

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:
print do código, usando o hífen no css módule.

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:
print do código de como fica adicionando CSS module.


CSS Módulo ou Styled-Components

Se você for mais conservador, e goste de programar usando o CSS,
a sugestão é usar o CSS Module.

Se não gosta de usar o CSS puro,Less ou o SASS,
uma boa opção é o styled-components.



Próxima página
Página anterior