CSS modules é uma abordagem que permite escopar nomes de classes CSS localmente para componentes específicos. Proporciona uma maneira de escrever código CSS de forma modular e encapsulada, reduzindo as chances de conflitos de estilos e tornando a manutenção dos estilos mais fácil. De fato, tornou-se uma das abordagens mais amplamente adotadas para organizar projetos React.

Organização de arquivos e pastas

Suponha que temos a seguinte interface de usuário composta por três componentes: VideoPlayer, AuthorInformation e VideoDescription.

Não iremos consolidar todos os componentes e estilos em um único arquivo. Em vez disso, estabeleceremos uma pasta separada para cada componente. Dentro de cada pasta, criaremos um arquivo jsx para renderização e lógica, e um arquivo css para aplicação dos estilos. Cada arquivo css deve terminar com module.css para garantir a modularidade. Assim, a estrutura ficaria da seguinte forma:

Nota

Esta abordagem oferece uma solução conveniente para criar componentes React e escrever estilos. Ela garante que cada componente seja isolado e possa ser reutilizado de forma eficaz. O escopo local dos nomes de classe melhora a organização do código, promove a reutilização e evita conflitos de estilos.

Sintaxe

Vamos explorar a sintaxe do uso de estilos modulares para um componente, utilizando o componente VideoDescription como exemplo.

Dentro do VideoDescription.jsx, criamos um componente que gera uma marcação específica. Não há nada particularmente novo ou desconhecido nisso.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

A diferença surge quando desejamos aplicar um nome de classe. Primeiro, é necessário importar o arquivo VideoDescription.module.css no arquivo VideoDescription.jsx. Isso pode ser feito utilizando a seguinte sintaxe:

import <file_name> from "<file_path>";

• <file_name> pode ser qualquer palavra associada ao arquivo. Geralmente, utiliza-se nomes como: css, styles ou simplesmente s;
• <file_path> é o caminho correto para o arquivo. Já conhecemos a sintaxe: ./.

Resultado:

import css from "./VideoDescription.module.css";

Para atribuir um nome de classe ao elemento, pode-se utilizar o atributo className. Dentro desse atributo, o nome da classe desejada deve ser colocado entre chaves {}. Dentro das chaves, inclui-se a palavra associada ao arquivo de estilos, seguida de um ponto . e o nome da classe. Resultado: className={css.text}. text é o nome real da classe.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Agora é possível abrir o arquivo VideoDescription.module.css e aplicar os estilos ao elemento p com o nome de classe text utilizando o seletor de classe:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}