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.
