Usando data-* com seletores de atributos do CSS

Os seletores de atributo do CSS correspondem a elementos com base na presença e no valor dos atributos: [data-state] corresponde a qualquer elemento com um atributo data-state; [data-state="active"] corresponde somente quando o valor é igual a "active".

[data-tooltip] corresponde a elementos que têm o atributo data-tooltip, independentemente do valor. Use-o para aplicar estilos básicos de dica de ferramenta a qualquer elemento que tenha dados de dica associados, antes de considerar o conteúdo da dica.

[data-theme="dark"] corresponde somente a elementos cujo data-theme seja exatamente igual a "dark". Isso permite estilizar com base no tema: aplique tokens de cor escuros quando o elemento HTML tiver data-theme="dark" definido por JavaScript.

[data-icon^="arrow"] corresponde a valores que começam com "arrow". [data-label$="ing"] corresponde a valores que terminam com "ing". [data-tag*="feature"] corresponde a valores que contêm "feature". Eles permitem estilização baseada em padrões sem adicionar muitas classes.

Modele o estado do componente com atributos data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. As regras CSS para cada estado substituem vários nomes de classes condicionais, mantendo o estado em um único atributo e os estilos claramente separados.

Os seletores de atributo têm a mesma especificidade que os seletores de classe (0,1,0). Ao combiná-los com seletores de elemento: button[data-variant="primary"] tem especificidade (0,1,1). Planeje a especificidade dos seletores de atributo junto com as regras baseadas em classes para evitar conflitos.

Uma dica de ferramenta feita apenas com CSS e data-tooltip: aplique ::after { content: attr(data-tooltip) } ao passar o cursor. A função content: attr() lê o valor do atributo e o usa como conteúdo do pseudo-elemento — não são necessários JavaScript nem elementos HTML adicionais.

Use classes para indicar a intenção de estilização (is-active, has-error) e atributos de dados para a carga de dados (data-user-id, data-count). Quando o mesmo atributo orienta tanto o comportamento (JS o lê) quanto a estilização (CSS o seleciona), data-* elimina a duplicação entre JS e CSS.

Encadeie vários seletores de atributo: [data-type="button"][data-size="large"] corresponde a elementos que têm os dois atributos definidos. Isso cria uma correspondência composta sem exigir uma classe combinada como .button-large, reduzindo a proliferação de classes.

Os seletores de atributo são um pouco mais lentos que os seletores de classe no cálculo de estilos. Para estilos estáticos, prefira classes. Use seletores de atributo quando o valor do atributo orientar o estilo (como data-state ou data-theme) e mudar em tempo de execução — quando um único atributo substitui várias classes alternadas.

Por padrão, a correspondência de valores de atributos diferencia maiúsculas de minúsculas no HTML (mas não para códigos de idioma em XHTML). Adicione o sinalizador i para ignorar maiúsculas e minúsculas: [data-state="Active" i] corresponde a "active", "Active" e "ACTIVE".

Os seletores de atributo do CSS correspondem a atributos data-* por presença, valor exato ou padrões parciais. Com content: attr() para dicas de ferramenta e data-state para máquinas de estados de componentes, os atributos data-* funcionam tanto como portadores de dados quanto como pontos de ligação para estilização no CSS, sem a proliferação de classes.