📅 Ebook GRATUITO 🚀 Como preparar o seu site para receber muitos acessos? 💰

Kinghost | Blog

CSS Modules: usando CSS de maneira eficaz em escala

Publicado em 04/05/2016

Atualizado em 26/04/2023

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

Conteúdos relacionados

Se você trabalha diariamente na internet, com certeza em algum momento se preocupou com a segurança das suas informações. Afinal, diversos dados pessoais e bancários são acessados todos os dias. Nesse contexto, cada dia mais existe a necessidade de reforçar a segurança dos seus dados e se proteger de possíveis golpes no mundo online. Por...
Você já ouviu falar de chatbot? Provavelmente a resposta é sim. Isso porque, essa tecnologia tem ganhado cada vez mais espaço na comunicação digital. Afinal, com a evolução tecnológica e as inúmeras ferramentas que prometem facilitar nossa rotina, os chatbots garantem destaque em diversos setores, desde atendimento ao cliente até vendas e marketing. Neste artigo,...
Você certamente já passou pela frustração de abrir um site que demora uma eternidade para carregar. Então, sabe como isso é irritante, não é mesmo? Com isso, sabe que a velocidade do site desempenha um papel fundamental na experiência dos usuários e no sucesso do seu negócio online.  Neste artigo, você vai conhecer as melhores...
Aprender a programar nunca foi tão fácil! Visto que, hoje em dia, existem diversos recursos gratuitos na web que podem te ajudar nessa jornada.  Então, se você é um completo novato no assunto, não se preocupe, esses recursos são perfeitos para você.  Mas não pense que eles são exclusivos para iniciantes, pois mesmo quem já...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você