Resumo

  • O primeiro rascunho público de CSS Cascade Level 5 saiu em 19 de janeiro de 2021 com @layer, dando aos autores uma ordem explícita para conjuntos de regras.
  • Na Candidate Recommendation Snapshot de 13 de janeiro de 2022, a camada posterior vence entre declarações normais e a anterior vence entre declarações !important. Regras normais sem camada ficam numa camada final implícita.

O botão da página parecia ter três diretores de arte. O reset queria discrição, a biblioteca defendia a cor da marca e a correção local tinha sido escrita depois de uma reunião urgente. O navegador sempre teve critérios para escolher uma declaração. Os desenvolvedores, porém, precisavam fazer sua regra sobreviver a todas as outras: acrescentavam classes ao seletor e voltavam para acrescentar mais quando uma nova folha entrava em cena. Era uma corrida de megafones. A ordem das equipes que escreviam os estilos continuava sem acordo.

O primeiro rascunho público do W3C, de 19 de janeiro de 2021, introduziu as camadas da cascata por meio de @layer. O autor pode agrupar declarações e definir a posição desses grupos. No anúncio do grupo CSS, a vantagem foi apresentada sem rodeios: ordenar as camadas sem reescrever seletores, sem mexer na especificidade dentro de cada uma e sem depender da ordem casual de chegada dos arquivos. As regras ganharam um mapa de lugares.

Uma camada inicial pode conter o reset, outra a biblioteca comum, outra os ajustes próprios do site. Quando declarações normais disputam a mesma propriedade, a camada que vem depois tem precedência. A especificidade dos seletores ainda entra na comparação, mas depois da posição da camada. Um seletor cheio de classes na camada antiga pode perder para uma classe simples na camada posterior. A equipe expressa a prioridade local no desenho da folha, em vez de construir um monumento de #id e !important.

Com !important, a lógica das camadas inverte o sentido. Entre declarações importantes, a camada anterior vence a posterior. A Candidate Recommendation Snapshot de 13 de janeiro de 2022 descreve os dois percursos na ordenação da cascata. Antes de discutir por que o botão ficou roxo, convém saber se as regras em disputa são comuns ou importantes. A força de seus seletores vem depois dessa pergunta.

Estilos que ficam fora das camadas nomeadas também entram no salão. O modelo de 2022 os coloca numa camada final implícita; para declarações normais, isso lhes dá precedência sobre as camadas explícitas. Um remendo antigo, esquecido fora do plano, pode sentar na primeira fila. O rascunho de trabalho de 29 de agosto de 2021 registra a mudança no tratamento desses estilos desde a primeira versão pública. O mapa de lugares também foi revisto enquanto a proposta amadurecia.

Aquele texto de agosto documentou ainda revert-layer, que faz uma propriedade voltar ao valor que receberia de uma camada anterior. Camadas podem ser aninhadas e estilos importados podem ser atribuídos a uma delas. A relação entre base, biblioteca e escolha local aparece na estrutura, em vez de se esconder na quantidade de sinais especiais de um seletor.

O histórico de publicações do W3C acompanha os rascunhos de 2021 até o marco de janeiro de 2022. A precedência dos estilos sem camada e o instrumento de retorno ganharam forma nesse caminho. O problema era cotidiano em sites grandes: várias fontes de estilo reivindicavam a mesma propriedade. As camadas tornaram possível declarar a autoridade de cada fonte antes que começasse o grito.

O navegador ainda termina com uma única cor para o botão. Dentro de cada camada, a especificidade continua útil. A diferença é que a equipe pode explicar por que a biblioteca, o componente ou o ajuste local teve a última palavra. Sexta-feira ainda existe; o remendo agora precisa encontrar seu lugar no mapa.