Por que IDs existem e como usá-los sem estragar seu código
IDs são atributos HTML que identificam elementos de forma única dentro de um documento. O uso de ids permite: seleção direta no CSS, ancoragem em links internos, manipulação via JavaScript, e validação estrutural. Parece simples até você encontrar o primeiro caso em que duas bibliotecas entram em conflito porque ambas querem usar o mesmo identificador.
O uso de ids permite: controle preciso, mas com armadilhas reais
Quando você define id="header-principal" num elemento, o CSS #header-principal e o JavaScript document.getElementById("header-principal") apontam exatamente para aquele nó. Nada mais, nada menos. Em projetos pequenos funciona perfeitamente. Em projetos que crescem, você começa a ver IDs sendo reutilizados por acidente, e aí o navegador usa apenas o primeiro match que encontrar. Isso já causou um bug que me custou três horas num projeto de e-commerce quando dois widgets de carrinho compartilhavam o mesmo ID gerado automaticamente pelo CMS. A solução foi criar uma camada de prefixação baseada no contexto de carregamento. Todo ID passava a ter o formato modulo__componente__id, o que reduziu colisões para perto de zero. Não é bala de prata, mas resolve na prática.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O problema maior que as pessoas não contam sobre IDs é a especificidade do CSS. Um seletor #algo tem peso 100. Se você usar isso junto com classes, o CSS pode se tornar um campo minado onde regras aparentemente corretas simplesmente não aplicam. Eu vi times inteiros lutando contra isso e a solução sempre foi abandonar IDs nos estilos e usar classes, reservando IDs exclusivamente para a camada de JavaScript e âncoras. Outro ponto que ninguém menciona com clareza: IDs devem ser únicos por documento, não por componente. Em frameworks como React ou Vue, onde você reutiliza o mesmo template múltiplas vezes, usar o mesmo ID fixo gera comportamento indefinido. A resposta certa é gerar IDs dinamicamente com uma função que combina um prefixo fixo com um sufixo único, tipo generateId("btn", Date.now()) ou melhor ainda, usar contadores incrementais dentro do escopo do componente.
Se o seu projeto depende muito de manipulação direta do DOM por JavaScript puro, IDs são úteis. Se você está num ecossistema moderno com React, Vue ou Svelte, considere que refs ou data-attributes podem ser opções mais limpas. IDs não são ruins, mas tratar eles como solução universal é um erro que eu cometi no início e que vi muitos desenvolvedores cometerem até hoje.
