Integrando camadas CSS Cascade a um projeto existente – Smashing Magazine

Você sempre pode obter uma visão geral fantástica das coisas no artigo de Stephenie Eckles, “Getting Started With CSS Cascade Layers”. Mas vamos falar sobre a experiência de integração de camadas em cascata no código do mundo real, o bom, o ruim e o espaguete.

Eu poderia ter criado um projeto de exemplo para um passo a passo clássico, mas não, não é assim que as coisas funcionam no mundo real. Quero sujar as mãos, como herdar código com estilos que funcionam e ninguém sabe por quê.

Encontrar projetos sem camadas em cascata foi fácil. A parte complicada foi encontrar um que fosse confuso o suficiente para ter problemas de especificidade e organização, mas amplo o suficiente para ilustrar diferentes partes da integração de camadas em cascata.

Senhoras e senhores, apresento a vocês este site de bot Discord de Drishtant Ghosh. Estou profundamente grato a Drishtant por me permitir usar seu trabalho como exemplo. Este projeto é uma landing page típica com uma barra de navegação, uma seção hero, alguns botões e um menu móvel.

Você vê como parece perfeito por fora. As coisas ficam interessantes, entretanto, quando olhamos para os estilos CSS subjacentes.

Compreendendo o projeto

Antes de começarmos a jogar @layers por aí, vamos entender melhor com o que estamos trabalhando. Clonei o repositório GitHub, e como nosso foco é trabalhar com CSS Cascade Layers, vou focar apenas na página principal, que consiste em três arquivos: index.html, index.csse index.js.

Observação: Não incluí outras páginas deste projeto, pois tornaria este tutorial muito detalhado. No entanto, você pode refatorar as outras páginas como uma experiência.

O index.css O arquivo tem mais de 450 linhas de código e, folheando-o, posso ver alguns sinais de alerta logo de cara:

• Há muita repetição de código com os mesmos seletores apontando para o mesmo elemento HTML.
• Existem alguns #id seletores, que se poderia argumentar que não deveriam ser usados ​​em CSS (e eu sou uma dessas pessoas).
• #botLogo é definido duas vezes e com mais de 70 linhas de intervalo.
• O !important palavra-chave é usada liberalmente em todo o código.

E ainda assim o site funciona. Não há nada “tecnicamente” errado aqui, o que é outra razão pela qual o CSS é um monstro grande e lindo – os erros são silenciosos!

Planejando a estrutura da camada

Agora, alguns podem estar pensando, “Não podemos simplesmente mover todos os estilos para uma única camada, como @layer legacy e encerrar o dia?

Você poderia… mas não acho que deveria.

Pense nisso: se mais camadas forem adicionadas após a legacy camada, eles deve substituir os estilos contidos no legacy camada porque a especificidade das camadas é organizada por prioridade, onde as camadas declaradas posteriormente têm maior prioridade.

/* new is more specific */
@layer legacy, new;

/* legacy is more specific */
@layer new, legacy;

Dito isto, devemos lembrar que os estilos existentes no site fazem uso liberal do !important palavra-chave. E quando isso acontece, a ordem das camadas em cascata é invertida. Então, mesmo que as camadas estejam delineadas assim:

@layer legacy, new;

…qualquer estilo com um !important declaração de repente agita as coisas. Neste caso, a ordem de prioridade passa a ser:

1. !important estilos no legacy camada (mais poderosa),
2. !important estilos no new camada,
3. Estilos normais no new camada,
4. Estilos normais no legacy camada (menos poderosa).

Eu só queria esclarecer essa parte. Vamos continuar.

Sabemos que as camadas em cascata lidam com a especificidade criando uma ordem explícita onde cada camada tem uma responsabilidade clara e as camadas posteriores sempre vencem.

Então, decidi dividir as coisas em cinco camadas distintas:

• reset: O padrão do navegador é redefinido como box-sizingmargens e preenchimentos.
• base: estilos padrão de elementos HTML, como body, h1, p, aetc., incluindo tipografia e cores padrão.
• layout: Material principal da estrutura da página para controlar como os elementos são posicionados.
• components: segmentos de UI reutilizáveis, como botões, cartões e menus.
• utilities: modificadores auxiliares únicos que fazem apenas uma coisa e fazem bem.

É apenas assim que gosto de dividir as coisas e organizar estilos. Zell Liew, por exemplo, possui um conjunto diferente de quatro baldes que podem ser definidos como camadas.

Há também o conceito de dividir as coisas ainda mais em subcamadas:

@layer components {
  /* sub-layers */
  @layer buttons, cards, menus;
}

/* or this: */
@layer components.buttons, components.cards, components.menus;

Isso pode ser útil, mas também não quero abstrair demais as coisas. Essa pode ser uma estratégia melhor para um projeto cujo escopo é um sistema de design bem definido.

Outra coisa que poderíamos aproveitar é estilos sem camadas e o fato de que quaisquer estilos não contidos em uma camada em cascata recebem a prioridade mais alta:

@layer legacy { a { color: red !important; } }
@layer reset { a { color: orange !important; } }
@layer base { a { color: yellow !important; } }

/* unlayered */
a { color: green !important; } /* highest priority */

Mas gosto da ideia de manter todos os estilos organizados em camadas explícitas porque mantém as coisas modular e sustentávelpelo menos neste contexto.

Vamos prosseguir adicionando camadas em cascata a este projeto.

Integrando camadas em cascata

Precisamos definir a ordem das camadas no topo do arquivo:

@layer reset, base, layout, components, utilities;

Isso torna mais fácil saber qual camada tem precedência sobre qual (elas têm mais prioridade da esquerda para a direita), e agora podemos pensar em termos de responsabilidade da camada em vez de peso do seletor. Seguindo em frente, prosseguirei com a folha de estilo de cima para baixo.

Primeiro, notei que a fonte Poppins foi importada nos arquivos HTML e CSS, então removi a importação CSS e deixei aquela em index.htmlpois geralmente é recomendado para carregar fontes rapidamente.

Em seguida está o seletor universal (*), que incluem estilos clássicos de redefinição que são perfeitos para @layer reset:

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

Com isso fora do caminho, o body o seletor é o próximo. Estou colocando isso em @layer base porque contém estilos básicos para o projeto, como planos de fundo e fontes:

@layer base {
  body {
    background-image: url("bg.svg"); /* Renamed to bg.svg for clarity */
    font-family: "Poppins", sans-serif;
    /* ... other styles */
  }
}

A forma como estou abordando isso é que os estilos no base camada geralmente deve afetar todo o documento. Até agora, nenhuma quebra de página nem nada.

Troca de IDs para aulas

Seguindo o body seletor de elemento é o carregador de página, que é definido como um seletor de ID, #loader.

Acredito firmemente no uso de seletores de classe em vez de seletores de ID, tanto quanto possível. Ele mantém a especificidade baixa por padrão, o que evita batalhas de especificidade e torna o código muito mais fácil de manter.

Então, entrei no index.html arquivo e elementos refatorados com id="loader" para class="loader". No processo, vi outro elemento com id="page" e mudou isso ao mesmo tempo.

Enquanto ainda no index.html arquivo, notei alguns div elementos faltando tags de fechamento. É surpreendente como os navegadores são permissivos com isso. De qualquer forma, eu limpei tudo e mudei o

Fonte: Tecmundo, Olhar Digital, MeioBit