Барои чӣ тавсия дода мешавад, ки ба истифодаи хосиятҳои data дар HTML?

Атрибутҳои data-* дар HTML тавсия медиҳанд, ки барои нигоҳ доштани маълумоти фармоишӣ, ки намоиши визуалӣ надоранд, мустақиман дар дохили унсурҳои DOM истифода шаванд. Ин имкон медиҳад:

• Ҳифз кардани қисмҳои хурди маълумот, ки бо унсур алоқаманданд: Масалан, шенасоии маҳсулот, ҳолати унсур, танзимоти widget.
• Ҳамвор кардани дастрасӣ ва тағир додани маълумот тавассути JavaScript: Маълумотҳо ба осонӣ тавассути element.dataset гирифта ва тағир дода мешаванд.

// Гирифтани маълумот
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Гирифтани арзиши атрибути data-element-id

// Таҳрир кардани маълумот
myElement.dataset.status = 'active'; // Таҳрир кардани арзиши атрибути data-status

• Диққат кардан ба истифодаи синфҳои бе маъно: Истифодаи синфҳо барои нигоҳ доштани маълумот (масалан, .status-active) метавонад сохторро камтар хонданӣ ва нигоҳдорӣашро душвор созад.
• Беҳтар кардани иҷроиш дар баъзе ҳолатҳо: Дастрасӣ ба маълумот тавассути dataset метавонад тезтар бошад, нисбат ба парсинг кардани атрибутҳои сатрӣ ё кор бо унсурҳои пинҳон.
• Истифодаи ин маълумотҳо дар селекторҳои CSS:

/* Интихоб кардани унсурҳо бо ҳолати муайян */
[data-status="active"] {
  border: 1px solid green;
}

Маҳз, истифодаи data-* барои маълумотҳое муҳим аст, ки ҳеҷ гуна дигар атрибути HTML бо маънои мувофиқ надоранд. Барои маълумоте, ки бояд барои муҳаррикҳои ҷустуҷӯ ё дигар парсерҳо дастрас бошад, бояд унсурҳо ва атрибутҳои семантикии мувофиқ истифода шаванд.