Синтаксис data-атрибутів

Юрій Чернієвський 5 хвилин читання

Зміст

У даній публікації розберемо дуже важливий нюанс, який часто опускають при поясненні синтаксису і правила написання data-* атрибутів, зокрема на прикладі data-sym. 

Чому саме на data-sym? А тому, якщо Ви мабуть вже звернули увагу на підпис, який я використовую у своїх публікаціях,  то він має певне оформлення:

✴ ✶ ✴ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ⟡ ♥ ⟡ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✴ ✶ ✴

✴ ✶ ✴ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ⟡ ♥ ⟡ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✴ ✶ ✴

Для тих, хто зацікавився цим прикладом, то я наводжу код, як це реалізовано у мене на блозі:

HTML

<p class="emoji"><span data-sym="✴">✴</span> 
<span data-sym="✶">✶</span> <span data-sym="✴">✴</span> <span data-sym="❖">❖</span> <span data-sym="✿">✿</span>
<span data-sym="❖">❖</span> <span data-sym="✴">✴</span> <span data-sym="☙">☙</span> <span data-sym="♥">♥</span> 
<span data-sym="❧">❧</span> <span data-sym="✴">✴</span> <span data-sym="⟡">⟡</span> <span data-sym="♥">♥</span>
<span data-sym="⟡">⟡</span> <span data-sym="✴">✴</span> <span data-sym="☙">☙</span> <span data-sym="♥">♥</span>
<span data-sym="❧">❧</span> <span data-sym="✴">✴</span> <span data-sym="❖">❖</span> <span data-sym="✿">✿</span>
<span data-sym="❖">❖</span> <span data-sym="✴">✴</span> <span data-sym="✶">✶</span> <span data-sym="✴">✴</span></p>
<p class="emoji"><span data-sym="✴">✴</span> <span data-sym="✶">✶</span> <span data-sym="✴">✴</span> <span data-sym="❖">❖</span>
<span data-sym="✿">✿</span> <span data-sym="❖">❖</span> <span data-sym="✴">✴</span> <span data-sym="☙">☙</span> 
<span data-sym="♥">♥</span> <span data-sym="❧">❧</span> <span data-sym="✴">✴</span> <span data-sym="⟡">⟡</span> 
<span data-sym="♥">♥</span> <span data-sym="⟡">⟡</span> <span data-sym="✴">✴</span> <span data-sym="☙">☙</span> 
<span data-sym="♥">♥</span> <span data-sym="❧">❧</span> <span data-sym="✴">✴</span> <span data-sym="❖">❖</span>
<span data-sym="✿">✿</span> <span data-sym="❖">❖</span> <span data-sym="✴">✴</span> <span data-sym="✶">✶</span> 
<span data-sym="✴">✴</span></p>

CSS

p.emoji {font-size: 1rem;  letter-spacing: 1px;}
p.emoji span { display: inline-block;}
/* --- Індивідуальні кольори символів --- */
p.emoji span[data-sym="♥"] {
  color: #e63946; /* червоний */
}
p.emoji span[data-sym="✴"] {
color: #ffd60a; /* жовтий */
}
p.emoji span[data-sym="☙"] {
color: #2a9d8f; /* зелений */
}
p.emoji span[data-sym="✿"] {
color: #fb8500; /* помаранчевий */
}
p.emoji span[data-sym="⟡"] {
  color: #56ccf2; /* голубий */
}
/* Додатковий варіант — якщо хочете стилізувати і ❖ та ❧ */
p.emoji span[data-sym="❖"] {
  color: #8e44ad; /* фіолетовий */
}
p.emoji span[data-sym="❧"] {
  color: #2a9d8f; /* зелений */
}
p.emoji span[data-sym="✶"] {
  color: #ff794c; /*На Ваш вибір*/
}

Якщо Ви будете шукати в інтернеті атрибутdata-sym, то навряд Ви щось знайдете! Пояснюю чому:

Потрібно детально розібратися з синтаксисом і правилами написання data-* атрибутів, зокрема на прикладі data-sym.

Атрибут data-sym (як і будь-який інший data- атрибут) — це не єдине, неподільне слово.

Він складається з двох чітких частин:

  1. Префікс data-: Це обов'язковий і стандартизований префікс.
  2. Ім'я атрибута: Це довільна назва, яку ви обираєте, наприклад, sym.

Префікс data-: Стандарт HTML

Призначення:

Цей префікс сигналізує браузеру (та іншим парсерам HTML), що атрибут, який слідує за ним, є власним (custom) атрибутом даних, а не стандартним атрибутом HTML (як class, id, src, href тощо).

Обов'язковість:

Будь-який атрибут, що починається з data-, є дійсним HTML5 атрибутом, навіть якщо він не визначений у специфікації HTML. Це дозволяє розробникам додавати довільні дані до елементів без порушення валідності HTML.

Службовий характер:

Префікс data- сам по собі не несе семантичного значення для браузера, крім того, що це "дані". Уся логіка та інтерпретація цих даних лежить на розробнику (CSS та JavaScript).

Ім'я атрибута (sym в data-sym): Ваша власна назва

Це частина, яку ви повністю контролюєте. Вона повинна відповідати певним правилам іменування:

Правила іменування для частини після data-:

  1. Початок: Ім'я має починатися з літери.
  2. Допустимі символи: Може містити:
  • Малі літери (від a до z)
  • Цифри (від 0 до 9)
  • Дефіси (-)
  • Крапки (.)
  • Підкреслення (_)

3. Недопустимі символи:

Зазвичай, великі літери (A-Z) не рекомендуються, якщо ви плануєте легко взаємодіяти з цим атрибутом за допомогою JavaScript dataset API. Чому? Тому що JavaScript автоматично перетворює дефіси на camelCase (наприклад, data-my-attribute стає element.dataset.myAttribute), але не працює так з великими літерами.

Щоб уникнути плутанини, краще використовувати лише малі літери та дефіси для розділення слів.

4. Змістовність:

Назва повинна бути змістовною і відображати тип даних, які вона зберігає. У нашому випадку sym (від symbol) чудово підходить для позначення символу.

5. Уникнення конфліктів:

Намагайтеся обирати імена, які навряд чи стануть стандартними HTML-атрибутами в майбутньому (хоча є невеликий ризик  через префікс data-).

Приклади правильних іменувань:

  • data-sym
  • data-crypto-symbol
  • data-item-id
  • data-product-name
  • data-current-status

Приклади поганих/нерекомендованих іменувань:

  • data-SYM (краще уникати великих літер, щоб уникнути плутанини з JS dataset)*
  • data-123symbol (не може починатися з цифри)
  • data-my/attribute (слеш)
  • data-символ (хоча браузери можуть це підтримувати, краще дотримуватися латинки для сумісності та передбачуваності)

Чому це важливо для data-sym (та інших data-* атрибутів)?

Розуміння цієї структури має вирішальне значення для:

  • Валідності HTML: Забезпечує, що ваш код залишається дійсним, навіть якщо ви додаєте кастомні дані.
    CSS селекторів: Використання [data-sym="BTCUSDT"] – це єдиний спосіб стилізації за цими атрибутами. Якщо ви неправильно назвете атрибут, ваші CSS правила не спрацюють.
  • JavaScript взаємодії: dataset API (наприклад, element.dataset.sym) дозволяє легко отримувати та змінювати значення цих атрибутів безпосередньо з HTML. 

Висновок

Отже, data-sym — це не просто одне слово, а стандартизований префікс data-, який дозволяє вам створювати власні імена атрибутів (як, наприклад, sym) для зберігання довільних даних безпосередньо в HTML, що потім можна ефективно використовувати в CSS для стилізації та в JavaScript для динамічної поведінки.

data-[назва] — це єдиний правильний синтаксис, де data- фіксований, а [назва] слідує правилам іменування з дефісами!

✶ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ⟡ ♥ ⟡ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✶

З повагою та найкращими побажаннями — Юрій Чернієвський!

✶ ❖ ✿ ❖ ✴ ☙ ♥ ❧ ✴ ⟡ ♥ ⟡ ✴ ☙ ♥ ❧ ✴ ❖ ✿ ❖ ✶