Nome De Objeto Com I

O que é e quando usar

Nomear objetos começando com a letra i é uma convenção que vejo em vários contextos — CSS, JavaScript, game engines, bancos de dados. O padrão mais comum é usar o prefixo i- para identificar ícones, itens ou objetos de interface. Exemplo: i-user, i-home, i-settings. Não é uma regra oficial de nenhum standard. É mais uma prática que surgiu porque pessoas precisavam diferenciar rapidamente elementos de ícone de outras classes no código. Funciona bem quando o time é pequeno. Começa a dar dor de cabeça quando o projeto cresce.

A parte prática: você não precisa de ferramenta nenhuma para começar a usar. Só escrever. Mas existe um jeito que evita problemas depois.

nome de objeto com i: como aplicar na prática

O primeiro passo é decidir o que vai receber o prefixo. Na minha experiência, o erro mais comum é aplicar o i- em tudo. Botões, cards, modals, inputs — não precisa. Reserve o prefixo apenas para ícones e elementos visuais puramente decorativos. Vou mostrar com CSS, que é onde vejo mais confusão.

Estrutura recomendada: Use BEM como base. O i- entra no elemento, não no bloco.

.card__icon i-user ou, se preferir mais simples, direto: .i-user. Aqui vai o exemplo que eu uso no dia a dia:

.i-user {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url('/icons/user.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.i-home::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  mask-image: url('/icons/home.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

Note que o segundo exemplo usa mask-image em vez de background-image. Isso permite trocar a cor via CSS sem precisar de múltiplos arquivos SVG. Economizas e mantém o código mais limpo.

O problema que ninguém conta

Eu caí nessa armadilha há uns dois anos: comecei a usar i- como prefixo universal. i-button, i-input, i-modal. O projeto tinha cerca de 400 classes. Quando precisei refatorar, gastei quase um dia inteiro só renomeando. O workaround que encontrei foi simples: fiz um script em Python que processava o CSS e o HTML, identificava todas as classes com i-, e gerava um relatório dizendo quantas eram realmente ícones versus quantas eram falsos positivos. Depois disso, removi o prefixo dos que não eram ícone e mantive apenas nos verdadeiros. Levou cerca de 20 minutos rodando o script, contra horas de trabalho manual.

Se você está num projeto grande, recomendo fazer o mesmo antes de committing anything.

Pegadinhas comuns

Conflito com tags HTML: a tag <i> existe desde o HTML 4. Muitos desenvolvedores usam o prefixo i- e depois ficam surpresos quando o acessibilidade tooling reclama. Solução: use <span> ou <svg> no lugar, e mantenha o nome da classe separado do elemento. Ordenação alfabética que quebra o CSS: se você nomar i-alpha, i-beta, i-car e depender da ordem no stylesheet para overrides, vai ter problema. A ordem dos seletores importa em CSS. Não confie em alfabetização.

Prefixo genérico demais: i- sozinho não diz nada sobre o domínio. i-user é melhor que i-1, mas i-nav-user é ainda melhor se você tiver ícones em múltiplas áreas (navegação, perfil, sidebar). O custo é maior nome, mas a manutenção fica mais barata.

Quando NÃO usar

Se o seu projeto já usa uma biblioteca de ícones estabelecida — Font Awesome, Lucide, Heroicons —, o prefixo i- pode conflitar com as classes internas dela. Nesse caso, não force a convenção. Apenas use as classes que a biblioteca oferece. Também não recomendo para nomes de variáveis em JavaScript ou TypeScript. iUser parece bom até você precisar denotar um índice de loop. i já é universalmente entendido como contador. Confusão garantida.

O nome de objeto com i funciona quando aplicado com critério. Como prefixo para ícones SVG em CSS, sim. Como solução universal para naming, não. O resto é gosto pessoal e consistência do time.