Como analisar variáveis CSS e encontrar declarações sem referência

Cole um trecho de CSS não vazio para obter as declarações de propriedades personalizadas reconhecidas, as referências var() por nome e as declarações sem referência correspondente.

Para que serve esta análise de variáveis CSS

A ferramenta CSS Variables analisa texto CSS fornecido por si para localizar declarações de propriedades personalizadas, contar referências var() e indicar declarações que não têm uma referência reconhecida. É útil para fazer uma revisão rápida de um conjunto de estilos antes de investigar variáveis que parecem não estar a ser utilizadas.

A análise centra-se nos padrões que a ferramenta reconhece. Por isso, o resultado ajuda a organizar a leitura do CSS, mas não representa uma interpretação completa da folha de estilos nem avalia o valor final de cada variável.

Como analisar um trecho de CSS

1. Reúna o trecho de CSS que pretende verificar. Inclua as declarações de propriedades personalizadas e as regras onde essas propriedades são usadas. Por exemplo, uma declaração deve ter um nome iniciado por dois hífenes, dois pontos, um valor e ponto e vírgula.

2. Cole um valor de CSS não vazio no campo de entrada da ferramenta. Se o conteúdo estiver vazio, o processamento termina sem sucesso. Quando houver mais do que uma forma de fornecer texto, um valor de texto não vazio tem prioridade sobre o outro valor suportado.

3. Inicie a análise. A ferramenta procura as declarações reconhecidas e guarda os respetivos valores depois de retirar espaços no início e no fim. Em seguida, procura referências com a forma var(--nome) e conta cada ocorrência pelo nome da variável, incluindo o conteúdo opcional dentro dos parênteses.

4. Consulte o resultado apresentado. Compare a lista de declarações com os nomes das referências e reveja a indicação de declarações sem uma referência correspondente. Use o nome da variável para voltar ao CSS e confirmar se a ausência de referência é intencional.

Como ler o resultado e conhecer os limites

O resultado bem-sucedido reúne as declarações reconhecidas, o total de declarações, o total de declarações sem referência e a contagem de referências por nome. Uma contagem elevada mostra que o mesmo nome foi encontrado em várias referências; não significa que o valor tenha sido calculado ou aplicado no navegador.

Uma declaração marcada como sem referência tem um nome que não apareceu entre as referências reconhecidas. Antes de a remover, confirme se é usada por outro mecanismo, noutro ficheiro ou num padrão de CSS que esta análise não reconhece. A ferramenta não resolve valores de reserva, não avalia o resultado de uma variável e não deteta todas as formas de utilização de propriedades personalizadas.

Se ocorrer um problema durante o processamento, a ferramenta devolve um resultado de insucesso em vez de prosseguir com uma resposta parcial. Nesse caso, reveja o texto introduzido e tente novamente.

Exemplo prático

Uma pessoa está a rever as variáveis de um cartão e quer confirmar se a cor é usada enquanto verifica uma possível variável de espaçamento sem referência.

Cole o trecho no analisador e inicie o processamento: :root { --cor: #245; --espaco: 1rem; } .card { color: var(--cor); }

O resultado deve listar duas declarações reconhecidas, indicar duas como total, mostrar uma referência para --cor e assinalar --espaco como declaração sem referência.

Limitações

• A análise fica limitada aos padrões reconhecidos para declarações e referências; não avalia valores finais, valores de reserva nem utilizações que não correspondam a esses padrões.

Erros comuns

• Erro: iniciar a análise com o campo vazio. Correção: cole um trecho de CSS não vazio e submeta-o novamente.

Perguntas frequentes

A ferramenta conta referências var() com valor de reserva?

Sim, quando a referência começa por var(--nome): cada ocorrência reconhecida é contada pelo nome, mesmo que exista conteúdo opcional dentro dos parênteses. Isto não significa que o valor de reserva seja avaliado.

Porque é que uma variável não aparece no resultado?

Só as declarações que seguem o padrão reconhecido são incluídas: o nome começa por dois hífenes, é seguido por uma forma válida de nome, dois pontos, um valor e ponto e vírgula. Outras formas podem ficar fora da análise.

O que significa uma declaração sem referência?

Uma declaração é indicada como sem referência quando o respetivo nome não coincide com nenhum nome encontrado nas referências reconhecidas. Confirme o CSS relacionado antes de decidir removê-la.