CSS Academy · Aula

Módulos CSS: estilos com escopo

Defina automaticamente nomes de classes com escopo local para componentes usando Módulos CSS na configuração de compilação.

Módulos CSS: estilos com escopo é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que são módulos CSS?

Os módulos CSS atribuem automaticamente um escopo aos nomes de classe CSS no arquivo do componente em que eles são definidos. Cada nome de classe é transformado em um identificador exclusivo durante a compilação — evitando o vazamento de estilos globais.

Convenção de arquivos

Dê ao seu arquivo CSS o nome .module.css (ou .module.scss para Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Importando módulos CSS

Importe o módulo como um objeto JavaScript. Os nomes de classe tornam-se propriedades:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Classes compostas

Use composes para estender uma classe de outro módulo:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Classes globais

Use :global() para desativar o escopo local de uma classe específica:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

Módulos CSS no Vite

O Vite oferece suporte integrado a módulos CSS. Os arquivos que correspondem a *.module.css são processados automaticamente:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

Módulos CSS no webpack

Ative os módulos na configuração do css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Composição de nomes de classe

Combine várias classes de módulos usando literais de modelo ou a biblioteca clsx/classnames:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Sem custo em tempo de execução

Os módulos CSS são resolvidos inteiramente durante a compilação — não há sobrecarga de JavaScript em tempo de execução. A saída é CSS padrão com nomes de classe renomeados. Isso os torna ideais para aplicações sensíveis ao desempenho.

Suporte ao TypeScript

Gere definições de tipos do TypeScript para módulos CSS usando typed-css-modules ou a configuração cssModuleTypes do Vite para acessar nomes de classe com segurança de tipos.

Módulos CSS versus CSS-in-JS

Comparação entre módulos CSS:

Apenas durante a compilação — sem custo de JS em tempo de execução
Integração com CSS/Sass padrão — sintaxe familiar
Sem estilos dinâmicos por meio de interpolação de JS
Menos flexíveis para estilos dinâmicos orientados por temas do que styled-components/Emotion

Verificação rápida

Como um módulo CSS evita colisões de nomes de classe entre dois arquivos de componentes diferentes?

Recapitulação

Os módulos CSS atribuem escopo aos nomes de classe automaticamente, transformando-os em identificadores exclusivos durante a compilação. Importe-os como objetos JavaScript e acesse as classes como propriedades. Use :global() para desativar o escopo de seletores globais e composes para composição de classes. O custo zero em tempo de execução e o suporte completo à sintaxe CSS/Sass fazem deles uma alternativa leve ao CSS-in-JS para estilos estáticos.

Perguntas Frequentes

A aula “Módulos CSS: estilos com escopo” é grátis?

Sim — o texto completo de “Módulos CSS: estilos 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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Módulos CSS: estilos com escopo”?

Defina automaticamente nomes de classes com escopo local para componentes usando Módulos CSS na configuração de compilação. Você pratica CSS 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 CSS Academy?

Nenhuma experiência prévia é necessária. CSS 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 3 de 4.

Quanto tempo leva a aula “Módulos CSS: estilos 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 CSS Academy?

Sim. Cada aula de CSS 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

Styled-components: literais de modelo marcados
Emotion: css() e styled()
Módulos CSS: estilos com escopo
Vanilla Extract: CSS-in-JS sem tempo de execução

← Voltar para CSS Academy