Módulos CSS: nomes de classes com escopo
Ative CSS Modules em um projeto Vite ou webpack para limitar automaticamente os nomes de classes ao arquivo do componente e eliminar vazamentos de estilos globais.
Módulos CSS: nomes de classes com escopo é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são módulos CSS
Os módulos CSS transformam os nomes das classes no momento da compilação para incluir um hash exclusivo, limitando seu escopo ao arquivo do componente. Uma classe chamada .card torna-se .card_a1b2c3 — é impossível colidir acidentalmente com os estilos de outros componentes.
Como funcionam os módulos CSS
Importe o arquivo CSS como um objeto. Use as propriedades do objeto como nomes de classes. Os empacotadores (Vite, webpack) cuidam da transformação.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Nomes de classes dinâmicos com clsx
A biblioteca clsx simplifica a composição condicional de nomes de classes com módulos CSS.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS global nos módulos CSS
Use :global para declarar classes que NÃO devem ter escopo restrito. Isso é útil para substituir classes de bibliotecas de terceiros.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Composição — estendendo classes
Os módulos CSS oferecem suporte a composes para herdar estilos de outra classe, inclusive de outros módulos.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}Módulos CSS versus estilos com escopo (Vue)
Os estilos com escopo do Vue e os módulos CSS impedem vazamentos globais, mas funcionam de forma diferente: os estilos com escopo adicionam atributos de dados; os módulos CSS transformam os nomes das classes. Ambos são válidos — os módulos CSS também funcionam no React.
Módulos CSS no Vite
O Vite oferece suporte nativo a módulos CSS para arquivos que terminam em .module.css. Não é necessária nenhuma configuração adicional.
TypeScript para módulos CSS
Instale typescript-plugin-css-modules ou gere arquivos .d.ts para módulos CSS com a ferramenta typed-css-modules e obtenha preenchimento automático para os nomes das classes.
Convenções de nomenclatura nos módulos CSS
Como os nomes das classes se tornam propriedades do JavaScript, use camelCase para os nomes das classes nos módulos CSS: .buttonPrimary em vez de .button-primary (o hífen exige acesso por colchetes).
Quando usar módulos CSS
Os módulos CSS são excelentes para aplicações React que precisam de estilos com escopo no componente, mas nas quais uma solução completa de CSS-in-JS seria exagerada. Vite + módulos CSS é uma solução leve de estilização sem sobrecarga em tempo de execução.
Módulos CSS versus CSS-in-JS
Módulos CSS: sem execução em tempo de execução, CSS puro e melhor desempenho. CSS-in-JS (styled-components): estilos dinâmicos em tempo de execução, com uma abordagem centrada em JS. Na maioria das aplicações, os módulos CSS são mais simples e rápidos.
Verificação rápida
O que acontece com o nome de uma classe CSS quando você usa módulos CSS?
Recapitulação: módulos CSS
Importe arquivos .module.css como objetos. Os nomes das classes recebem automaticamente um escopo com um hash exclusivo. Use :global() para estilos globais intencionais. Use composes para herança entre módulos. Use clsx para nomes de classes condicionais. O Vite oferece suporte nativo a módulos CSS. Não há sobrecarga em tempo de execução, ao contrário do CSS-in-JS.
Perguntas Frequentes
A aula “Módulos CSS: nomes de classes com escopo” é grátis?
Sim — o texto completo de “Módulos CSS: nomes de classes com escopo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Módulos CSS: nomes de classes com escopo”?
Ative CSS Modules em um projeto Vite ou webpack para limitar automaticamente os nomes de classes ao arquivo do componente e eliminar vazamentos de estilos globais. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Módulos CSS: nomes de classes com escopo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Metodologia BEM: bloco elemento modificador
- Módulos CSS: nomes de classes com escopo
- CSS-in-JS: Styled-components e Emotion
- Tailwind CSS: abordagem utility-first