Você já conhece a regra @layer no CSS? Aprenda como ela funciona e como utilizá-la para organizar seus códigos CSS de maneira mais eficiente!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento
Tudo Sobre @layer no CSS – Organize seus Códigos com Perfeição
No desenvolvimento web, o CSS (Cascading Style Sheets) é fundamental para definir o estilo das páginas. A ideia de “cascata” no CSS significa que as regras de estilo são aplicadas em uma ordem específica, de cima para baixo.
Isso faz com que as últimas regras sobrescrevam as anteriores, caso elas possuam a mesma especificidade. No entanto, à medida que os projetos web crescem, essa estrutura pode se tornar confusa e difícil de gerenciar.
A introdução da regra @layer no CSS visa solucionar esses problemas, permitindo que os desenvolvedores dividam o CSS em camadas lógicas, facilitando a manutenção e controle das regras de estilo e evitando conflitos.
Nesta aula, vou te ensinar como utilizar a regra @layer no CSS para organizar e definir a prioridade das suas regras de estilo.
O que é a regra @layer no CSS?
A regra @layer no CSS é uma at-rule que define uma camada na cascata de estilos, estabelecendo a ordem de prioridade quando há mais de uma camada.
Com ela, você pode organizar seu CSS em seções lógicas, separando, por exemplo, estilos básicos, de layout, de componentes e muito mais.
Isso facilita o desenvolvimento de projetos mais complexos, onde algumas regras de estilo precisam ter prioridade sobre outras, sem depender apenas de especificidade excessiva.
A @layer ajuda a estruturar o código, tornando-o mais legível e fácil de gerenciar. Saiba mais na documentação do Mozilla: @layer
Compreendendo a Cascata no CSS
A primeira coisa que precisamos entender ao usar CSS é o conceito de cascata. A cascata determina a ordem em que as regras são aplicadas.
Nos arquivos CSS, as folhas de estilo são lidas de cima para baixo, e a última regra aplicada normalmente tem preferência, desde que a especificidade seja a mesma.
Isso significa que, se duas regras conflitantes forem aplicadas ao mesmo elemento e tiverem a mesma especificidade, a última regra será a que prevalecerá.
Por exemplo, se dentro de um arquivo de estilo CSS aplicarmos uma regra para deixar a cor do texto do título h1 em vermelho e, em seguida, aplicarmos outra regra mudando a cor para azul, a cor exibida será azul.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
color: red;
}
h1 {
color: blue;
}
Isso acontece porque ambas as regras possuem a mesma especificidade, ou seja, estão selecionando a partir do elemento h1. Dessa forma, a regra aplicada por último é a que terá efeito.
Saiba mais sobre especificidade no CSS: Descubra as Novas Pseudo-Classes CSS para Melhorar Seu Código
Camadas de Estilos com @layer no CSS
Agora que já entendemos a cascata, podemos partir para a aplicação da regra @layer no CSS e visualizar como ela pode nos ajudar a organizar melhor o nosso código.
Por padrão, ao criarmos um documento HTML, já existe uma camada chamada User Agent Stylesheet, que é a camada de estilos padrão do navegador. Quando aplicamos nossos estilos com CSS, criamos uma nova camada que sobrescreve essa.
A @layer nos permite criar diversas camadas de regras de estilo que possuem uma ordem de prioridade clara. Em vez de confiar apenas na cascata e nas especificidades, podemos agrupar as regras CSS em diferentes camadas e controlar como elas interagem entre si.
Isso é especialmente útil em projetos grandes, onde gerenciar a cascata padrão pode ser difícil. Alterar a especificidade constantemente pode tornar o código confuso e até dificultar a aplicação correta dos estilos.
Ao dividirmos o CSS em camadas, a camada declarada por último tem prioridade sobre as anteriores, independentemente da especificidade.
Por exemplo, vamos criar duas camadas chamadas teste1 e teste2, em que a especificidade da camada teste1 é maior que a da teste2.
A sintaxe básica para criar uma camada é a seguinte: @layer nome-da-camada.
@layer teste1 {
body h1 {
color: red;
font-size: 35px;
}
}
@layer teste2 {
h1 {
color: blue;
}
}Mesmo com o seletor de teste1 sendo mais específico, a regra aplicada será a da camada teste2, pois foi declarada depois.
Quando usamos @layer, a ordem em que as camadas são declaradas influencia diretamente a prioridade dos estilos.
A especificidade ainda desempenha um papel importante dentro das camadas, mas a organização por camadas facilita a aplicação correta dos estilos.
Como Funciona um @layer Dentro de Outro @layer?
Em projetos maiores, podemos criar layers dentro de outras layers para organizar e dividir ainda mais o código CSS. Isso permite um controle adicional sobre quais partes do seu CSS se sobrepõem e como interagem entre si.
Quando você cria uma camada dentro de outra, a camada interna tem menos prioridade em relação à externa, mas ainda segue a cascata normal do CSS.
Isso significa que as subcamadas têm uma hierarquia de precedência dentro da camada principal, e as regras de estilo dentro delas podem ser sobrescritas por camadas declaradas depois.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
@layer abstracts {
h1 {
color: red;
font-size: 35px;
}
@layer functions {
h1 {
color: blue;
}
}
@layer variables {
h1 {
color: green;
}
}
}
Perceba que a camada externa abstracts prevalece sobre as subcamadas functions e variables. No entanto, se removermos a regra de cor da camada abstracts, a cor da camada variables prevalecerá sobre a de functions, pois foi declarada depois.
@layer abstracts {
h1 {
font-size: 35px;
}
@layer functions {
h1 {
color: blue;
}
}
@layer variables {
h1 {
color: green;
}
}
}
Declarar Prioridades Entre as Layers
Como vimos, por padrão, a regra geral das layers é que a última camada declarada tem a maior prioridade. Ou seja, a camada mais recente sobrescreve as regras das camadas anteriores, respeitando a lógica da cascata.
No entanto, esse comportamento pode ser manipulado e controlado ao definir explicitamente a ordem das layers. Podemos definir a ordem de prioridade das layers no início do código CSS da seguinte forma:
@layer abstracts, components, base;
Isso significa que, independentemente da ordem em que as camadas sejam escritas no código, a ordem de prioridade será: primeiro base, depois components e, por último, abstracts.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
@layer abstracts, components, base;
@layer components {
h1 {
color: blue;
}
}
@layer base {
h1 {
color: orange;
}
}
@layer abstracts {
h1 {
color: red;
font-size: 35px;
}
}
Repare que, mesmo com a camada base sendo escrita entre components e abstracts, a ordem de prioridade definida foi respeitada.
Isso é muito útil, pois, independentemente da ordem em que você escrever as camadas, elas serão organizadas com base na definição inicial.
Atenção ao Uso do !important com @layer
Um cuidado importante ao trabalhar com layers é o uso da declaração !important.
Ao usar @layer, não é recomendado utilizar !important, pois ele altera a hierarquia e a ordem de prioridade das camadas, gerando confusão sobre a importância dos estilos definidos.
Portanto, minha recomendação é evitar o uso de !important com @layer, para não complicar o gerenciamento do CSS.
Conclusão – Tudo Sobre @layer no CSS – Organize seus Códigos com Perfeição
A introdução do @layer no CSS proporciona uma maneira mais estruturada e organizada de gerenciar os estilos, especialmente em projetos maiores.
Ao definir camadas e controlar a prioridade entre elas, você garante que seu código CSS seja mais fácil de manter e menos propenso a conflitos de prioridades e especificidades.
Em projetos maiores, utilizar @layer pode simplificar a gestão de estilos, tornando o código mais legível e fácil de manipular.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack!Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do ZeroQuer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- Como surgiu a OpenAI: entenda a história completa da criadora do ChatGPT e seus impactos
Descubra como surgiu a OpenAI, conheça sua transformação na gigante da inteligência artificial e entenda como essa trajetória afeta a tecnologia e os negócios! - Connected Speech – Como Entender o Inglês Falado por NativosAprenda tudo sobre Connected Speech e entenda, de uma vez por todas, o inglês falado por nativos com mais fluência e clareza!
- 17 Novas Fórmulas Excel Úteis para o TrabalhoConheça 17 novas fórmulas Excel que serão muito úteis no seu dia a dia! Aprenda sobre as fórmulas mais recentes que aumentarão sua produtividade no trabalho!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.