Ordenar seletores CSS por especificidade

Esta ferramenta recebe seletores CSS individuais, valida a sintaxe, calcula o valor de especificidade em três partes e devolve toda a lista em ordem crescente. Ela entende pseudoclasses funcionais modernas, como :is(), :not(), :has(), :where() e :nth-child(), e preserva a ordem original quando dois seletores têm o mesmo peso.

Entenda a pontuação de especificidade em três partes

Cada resultado usa a estrutura conhecida de ID, classes e tipos. O primeiro número conta seletores de ID, como <code>#checkout</code>. O segundo conta classes, seletores de atributo e pseudoclasses, como <code>.active</code>, <code>[disabled]</code> e <code>:hover</code>. O terceiro conta seletores de tipo e pseudoelementos, como <code>button</code> e <code>::before</code>. Seletores universais e combinadores não acrescentam pontos. A comparação é lexicográfica: um ID supera qualquer quantidade de itens nas outras colunas, e uma classe supera qualquer quantidade de seletores de tipo quando as contagens de ID são iguais. O array <code>specificity</code> é conveniente para software, enquanto <code>specificity_text</code> mostra o mesmo valor em um formato compacto e legível. Os resultados ficam em ordem crescente, colocando primeiro as regras amplamente reutilizáveis e por último os seletores mais difíceis de sobrescrever. Se duas pontuações forem idênticas, a ferramenta mantém a ordem de entrada em vez de criar um desempate alfabético. Esse comportamento estável torna execuções repetidas previsíveis e preserva o contexto útil de uma folha de estilos ou lista de revisão.

Trate corretamente as pseudoclasses modernas

Pseudoclasses funcionais são o ponto em que cálculos manuais mais costumam falhar. <code>:where()</code> sempre contribui com especificidade zero, inclusive para os seletores internos, permitindo detalhar a estrutura sem tornar uma regra mais difícil de sobrescrever. Já <code>:is()</code>, <code>:not()</code> e <code>:has()</code> contribuem com a especificidade do argumento mais específico, sem acrescentar um ponto próprio de pseudoclasse. As formas <code>:nth-child()</code> e <code>:nth-last-child()</code> somam um ponto de pseudoclasse e a maior especificidade de uma lista opcional após <code>of</code>. Formas da árvore de sombra, como <code>:host()</code> e <code>::slotted()</code>, também são consideradas. O analisador percorre parênteses aninhados, colchetes, strings entre aspas e escapes; assim, vírgulas dentro de uma função não são confundidas com separadores no nível superior. Envie cada item da lista como um único seletor. Uma vírgula no nível superior representaria vários seletores com pontuações possivelmente diferentes e, portanto, é rejeitada em vez de ser reduzida a um valor único enganoso. Essa regra explícita mantém a correspondência exata entre cada entrada e uma pontuação de saída.

Use a lista ordenada para simplificar a cascata

Um relatório de especificidade é mais útil para orientar uma refatoração do que para incentivar seletores mais fortes. Cole seletores representativos de um componente, design system ou arquivo legado e examine o final da lista. Saltos grandes geralmente revelam IDs, estados excessivamente qualificados ou um argumento poderoso escondido em <code>:is()</code> ou <code>:not()</code>. Esses seletores podem obrigar o código posterior a repetir detalhes estruturais apenas para sobrescrever uma declaração. Considere substituí-los por uma classe com finalidade única, reduzir contexto opcional com <code>:where()</code> ou organizar camadas para que a precedência não dependa de pontuações cada vez maiores. O início da lista também é útil: regras de elementos e utilitários leves são mais fáceis de reutilizar quando sua função está clara. Processos automatizados podem chamar a API por US$ 0,002 para sinalizar seletores novos acima do limite definido pela equipe, registrar a especificidade junto ao CSS gerado ou apresentar diagnósticos ordenados durante a revisão. Uma entrada inválida interrompe toda a solicitação, garantindo que um relatório parcial não esconda um seletor malformado. O cálculo é determinístico e não acessa a rede; entradas idênticas sempre geram os mesmos valores e a mesma ordem.