Introdução

De acordo com o repositório oficial do Módulo CSS do GitHub , um Módulo CSS é um arquivo CSS no qual todos os nomes de classe e nomes de animação têm escopo local por padrão. Por outro lado, em um arquivo CSS típico, todos os seletores de CSS residem no escopo global.

Neste tutorial, examinaremos alguns problemas comuns que surgem com frequência ao escrever CSS e aprenderemos como o módulo CSS pode nos ajudar a evitá-los. Em seguida, integraremos o Módulo CSS em um aplicativo React.

Vamos começar!

Pré-requisitos

• Conhecimento de HTML e CSS
• Conhecimento prático de React

A familiaridade com o módulo CSS é um bônus adicional!

Compreendendo problemas comuns de CSS

Todos os seletores em CSS são variáveis ​​globais. À medida que um aplicativo é dimensionado, trabalhar com variáveis ​​globais e gerenciar dependências torna-se cada vez mais difícil. Quando vários desenvolvedores estão trabalhando no aplicativo, as coisas ficam ainda mais complicadas.

Aqui está o porquê:

Colisão de nomes

Digamos que, ao definir o estilo de um blog, adicionamos o nome da classe post para indicar postagens na página inicial. Outro desenvolvedor cria a barra lateral e também adiciona o nome da classe post para postagens na barra lateral. Erros como esse levam à colisão de nomes, vistos aqui:

/* estilos */
.main.post { cor: # 000000; tamanho da fonte: 2rem;
} .sidebar.post { cor: #FFFFFF; tamanho da fonte: 1rem;
}

Como um aplicativo s cales , é mais provável que você encontre n colisão de uma mé ( potencialmente prejudicando o desempenho ) .

Dificuldade em limpar códigos mortos

Quando um elemento ou componente React é excluído de nosso código, também precisamos excluir seus estilos. No entanto, em aplicativos grandes, pode ser muito difícil determinar se uma classe está em uso. CSS não oferece uma solução pronta para uso.

Gerenciamento de dependência

As dependências não são definidas explicitamente ao trabalhar com variáveis ​​globais, tornando difícil determinar quais estilos seriam herdados ou aplicados por meio de composição .

Existem outras dependências implícitas no CSS que não são facilmente identificadas meramente pela varredura do código. Por exemplo, um elemento com position: absolute é relativo a seu elemento pai com position: relative .

Dependências são um grande motivo de preocupação, e a facilidade de manter nosso código CSS depende muito de quão bem nossas dependências são estruturadas.

Avaliando soluções

BEM-Block Element Modifier é uma convenção de nomenclatura popular para classes em HTML e CSS que visa ajudar os desenvolvedores a entender a relação entre as duas linguagens. O BEM resolve os problemas descritos acima, fornecendo regras de nomenclatura rígidas.

No BEM, um Bloco é um elemento autônomo que pode fazer sentido por si só; geralmente é um elemento pai como .btn {} . Um Elemento se refere ao elemento filho de um Bloco ; não tem significado independente e é denotado por dois sublinhados após o nome do Bloco (por exemplo, .btn__text ).

O modificador é um sinalizador no Bloco ou Elemento usado para estilizá-lo. É denotado por dois hifens ao nome do Bloco ou Elemento (por exemplo, .btn-principal {} ).

//Bloco de elemento
.btn {} //Elemento que depende do Bloco frequentemente um elemento filho
.btn__text { //as regras
} //Modificadores que mudam os estilos do bloco
.btn-primário {}
.btn-pequeno {}

O benefício da metodologia de nomenclatura BEM é que todos os seletores têm como escopo os modificadores, apesar de serem globais. No entanto, adicionar nomes BEM manualmente é repetitivo, bastante tedioso e sujeito a erros humanos.

Você pode acabar gastando uma quantidade significativa de tempo tentando descobrir se algo é um Bloco ou Elemento . Na minha opinião, Jeremy Thomas , o criador do Bulma CSS , resume perfeitamente o problema:

O desenvolvimento envolve a automação de problemas difíceis, então devemos ser capazes de automatizar facilmente a nomenclatura com a ferramenta certa.

Nota: Embora o Módulo CSS nos permita definir o escopo de nossos estilos, ainda podemos declarar classes globais prefixando o nome da classe com :global:

: global.title {
tamanho da fonte: 2rem;
} 

Vantagens do Módulo CSS

A maioria dos fluxos de trabalho JavaScript e CSS modernos têm tendência para a arquitetura baseada em componentes, mas o progresso em CSS tem sido puramente convencional e não é realmente suportado pela linguagem.

O BEM, como discutido anteriormente, é um exemplo perfeito. Um ditado familiar conhecido como teorema fundamental da engenharia de software declara que “todo problema em ciência da computação pode ser resolvido por uma camada extra de abstração ”.

Módulo CSS é uma camada fina de abstração que encapsula novos conceitos introduzidos na linguagem. Consequentemente, o Módulo CSS é escrito como CSS simples, conforme visto no seguinte snippet de código:

/* styles.css */
.título { tamanho da fonte: 2rem; intensidade da fonte: Negrito; cor vermelha;
}
.texto { tamanho da fonte: 1.2rem; peso da fonte: 500; cor azul;
}

Uma diferença é que no Módulo CSS, toda a nossa marcação é escrita em um arquivo JavaScript como index.js :

 importar estilos de"./styles.css";
document.getElementById ("app"). innerHTML=`
 Olá Vanilla! 
 Usamos a mesma configuração do Parcel para agrupar este sandbox, você pode encontrar mais informações sobre o pacote

`;

Quando importamos nosso Módulo CSS de nosso arquivo index.js , o Módulo CSS exporta um objeto com mapeamentos de nomes locais para nomes globais:

 { título:"_src_styles__title", texto:"_src_styles__text"
}

Podemos ver que o módulo CSS gera dinamicamente nomes de classe exclusivos, automatizando a nomenclatura para toda a nossa equipe.

Como funciona o módulo CSS

Ferramentas modernas como webpack, Browsify e JSPM nos permitem definir explicitamente as dependências entre idiomas. Consequentemente, podemos descrever explicitamente as dependências de cada arquivo, independentemente do tipo de arquivo de origem.

No snippet de código abaixo, sempre que MyComponent é carregado ou agrupado, o CSS correspondente é carregado como qualquer outra dependência:

 import'./my-component-name.css';
const MyComponent=()=> { //códigos de componente
}
exportar MyComponent padrão;

O módulo CSS inclui esta nova técnica, que é a capacidade principal dos carregadores modernos. No entanto, no nível fundamental, há uma necessidade de uma nova especificação para descrever como esses símbolos são compartilhados.

Compreendendo o ICSS

Embora o Módulo CSS seja escrito como CSS simples, ele na verdade é compilado em um formato intercambiável de baixo nível chamado ICSS (I CSS nteroperável ) que é projetado para implementadores de carregador, não usuários finais. É um superconjunto do CSS padrão e um formato de arquivo de baixo nível que aprimora o CSS.

Você pode incorporar o módulo CSS em um ampla gama de aplicativos , no entanto, definiremos o estilo de um aplicativo React.

Estilizando um aplicativo React com Módulo CSS

Criar aplicativo React v2 (e superior) oferece suporte ao módulo CSS pronto para uso. Tudo o que precisamos fazer é usar a seguinte convenção de nomenclatura:

 [nome].module.css

Vamos ver isso em ação criando um aplicativo React simples! Primeiro, vamos inicializar e executar nosso aplicativo:

 npx create-react-app button-stack
cd botton-stack
npm start

A seguir, adicionaremos suporte ao módulo CSS para nosso aplicativo simplesmente renomeando o arquivo App.css para App.module.css . Atualize a instrução de importação no arquivo App.js para evitar erros:

.shadow { sombra da caixa: rgba (50, 50, 50, 0,2) 0 5px 5px 0;
}
.aplicativo { display: flex; justify-content: space-around;
}
.título { margem superior: 25%; alinhamento de texto: centro;
}

Atualize o arquivo Index.css para Index.module.css , bem como a instrução de importação no arquivo Index.js . A seguir, em nosso arquivo App.js , adicione o seguinte código:

 importar {título, aplicativo} de'./App.module.css';
importar botão de'./components/Button';
function App () { Retorna ( 
 
 Botões do módulo CSS 
 
  
 
 );
}
exportar aplicativo padrão;

Embora a maior parte desse código seja familiar, existem algumas coisas que precisamos observar. Primeiro, estamos desestruturando title e app . Os estilos de que precisamos são do objeto styles , que é exportado pelo módulo CSS.

Agora, precisamos criar o componente Botão . No diretório src , crie uma pasta componentes . Dentro da pasta, crie um arquivo Button.js e um Button.module.css ; adicione o seguinte código no arquivo Button.module.css :

.normal-button { display: inline-flex; altura da linha: 2; alinhamento de texto: centro; preenchimento: 1px 60px; família de fontes:"IBM Plex Sans"; tamanho da fonte: 1rem; peso da fonte: 500; raio da borda: 4px; cursor: ponteiro; compõe: sombra de"../App.module.css" } .perigo { compõe: botão normal; cor de fundo: rgb (255, 8, 8); borda: 2px sólido rgb (255, 8, 8); cor branca; } .secundário { compõe: botão normal; cor de fundo: rgb (128, 118, 118); borda: 2px sólido rgb (128, 118, 118); cor branca; } .info { compõe: botão normal; cor de fundo: rgb (6, 218, 255); borda: 2px sólido rgb (6, 218, 255); cor branca; } .aviso { compõe: botão normal; cor de fundo: rgb (248, 202, 49); borda: 2px rgb sólido (248, 202, 49); cor: #ffffff; } .success { compõe: botão normal; cor de fundo: rgba (30, 156, 41, 0,966); borda: 2px solid rgba (30, 156, 41, 0,966); cor branca; } .primary { compõe: botão normal; cor de fundo: rgba (33, 124, 243, 0,849); borda: 2px sólido rgba (33, 124, 243, 0,849); cor: #FFFFFF; }

Neste arquivo, temos uma classe de botão normal .normal-button que compõe a classe sombra do App.module.css .

Composição é um recurso do Módulo CSS que nos permite compor seletores. Consequentemente, podemos compor uma classe herdando estilos de outra classe, mas essas regras de composição devem vir antes de outras regras.

Por exemplo, .danger , .info , .primary , .warning e classes.success , todas herdam estilos de .normal-botton por meio da composição.

Nosso arquivo App.js agora deve ser semelhante ao código abaixo:

 importar {título, aplicativo} de'./App.module.css';
importar botão de'./components/Button';
function App () { Retorna ( 
 
 Botões do módulo CSS 
 
  
 
 );
}
exportar aplicativo padrão;

A tela do nosso aplicativo deve ser semelhante à imagem aqui:

Você pode visualizar o código completo do tutorial.

Conclusão

Sem dúvida, o Módulo CSS oferece uma das melhorias mais significativas para a linguagem CSS em anos! Uma das melhores coisas sobre o Módulo CSS é que podemos escrever o bom e velho CSS que pode ser incorporado em uma variedade de aplicativos. Simplesmente adiciona mais poder ao CSS!

Se seu aplicativo React não usa Criar aplicativo React ou usa uma versão anterior à versão 2, você ainda pode adicionar suporte para o módulo CSS usando o babel-plugin-react-css-module .

A postagem Um mergulho profundo no módulo CSS apareceu primeiro no LogRocket Blog .