🚀 Conexão kInghost: Aulas online e gratuitas para fazer o seu negócio evoluir no digital 💰

Kinghost | Blog

CSS Modules: usando CSS de maneira eficaz em escala

Publicado em 04/05/2016

Atualizado em 04/06/2024

Todos nós amamos, ou pelo menos, percebemos a grande importância do CSS na web. Porém, isto não significa que devemos ignorar os problemas que essa tecnologia apresenta, especialmente quando consideramos projetos de grande escala. Algumas das principais dificuldades são:
1- Classes definidas em escopo global.
2- Dependências.
3- Eliminação de código morto.
4- Minificação.
5- Compartilhamento de constantes.
6- Resolução não determinística.
7- Encapsulamento.

Existem muitas tentativas de solução definitiva para essas dificuldades e, como era de se esperar, elas trazem em si alguns pontos fracos. Alguns exemplos de iniciativas são React Style, jsxstyle, radium e, o nosso objeto de estudo, css-modules.

Mas a final, o que é css-modules?
Segundo a documentação disponível no repositório oficial no github: são arquivos CSS nos quais todos os nomes de classes e animações são carregados em escopo local por padrão.
Ou seja, o css-modules é um processo que ocorre durante o passo de build, que altera os nomes de classes e seletores para que tenham um escopo local. Para entender melhor, poderíamos traçar um paralelo com os namespaces.

Então para entendermos na prática como o css-modules pode nos ajudar, vamos relembrar como o css funciona de maneira nativa:

<div class=”bg”>Teste</div>

Nós determinamos uma classe para o elemento e após inserimos o estilo no aquivo css.

.bg
{
    background-color: blue;
}

Com apenas isso, definimos que em qualquer arquivo html, em que a tabela de estilos esteja incluída, todos os elementos com a classe bg terão um plano de fundo azul. Sendo este estilo global, se alterarmos algo nele, a alteração afetará todos os elementos com a classe bg.

O css-modules funciona de maneira diferente. Nele, é preciso escrever toda a estrutura em um arquivo JavaScript como no exemplo a baixo:

import styles from "./styles.css";

element.innerHTML =
'<h1 class="${styles.title}">
An example heading
</h1>';

Quando houver a compilação, o compilador irá procurar no arquivo importado styles.css e no JavasCript para tornar .title acessível através de styles.title, gerando assim um novo arquivo HTML e CSS. Como no exemplo abaixo:

<h1 class="_styles__title_309571057">
An example heading
</h1>
._styles__title_309571057
{
  background-color: red;
}

Pode parecer um pouco confuso ou até desnecessário, mas…

Por que usar CSS Modules?

Você já foi obrigado, por falta de tempo, a escrever o CSS o mais rápido possível?
Já se deparou com estilos os quais não sabia exatamente para que serviam ou sequer se estavam sendo usados?
Já se perguntou se você poderia se livrar de alguns estilos sem quebrar completamente todo o layout de sua aplicação?
Você já se perguntou se os estilos dependiam de algo externo ou se eram mantidos por si próprios? Já sobrescreveu um estilo sem ter esse propósito?

Como o CSS modules utiliza escopo local, todos esses problemas são evitados. Além disto ele confere a possibilidade de criar uma dependência completa e de maneira explícita. Como no exemplo a baixo:

composes: dark-red from "./colors.css";
font-size: 30px;
line-height: 1.2;

Esses são alguns benefícios do css-modules, caso tenha conhecimentos em inglês e queira se aprofundar, um dos criadores do css-modules Glen escreveu um excelente artigo sobre as vantagens do mesmo, o qual utilizei como referência para a criação deste artigo.

O que você achou deste conteúdo?

O que você achou deste conteúdo?

William

William Dorneles

É assistente de desenvolvimento no setor de Marketing e estudante de Game Design na Uniritter em Porto Alegre.

William

William Dorneles

É assistente de desenvolvimento no setor de Marketing e estudante de Game Design na Uniritter em Porto Alegre.

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

Você pode até não perceber, mas as aplicações web já se tornaram parte da sua rotina. Diariamente, você acessa informações, realiza negócios e se comunica por meio dessas aplicações. Isso mesmo, desde plataformas de e-commerce que facilitam compras online até redes sociais que conectam bilhões de pessoas globalmente, as aplicações web desempenham um papel fundamental...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você