Атрибуты данных полезны не только в JavaScript. С их помощью можно менять и стили HTML-элементов.

Давайте создадим элементы <div>...</div>, которые будут содержать атрибуты data-raing с разными целочисленными значениями:

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

Для начала стилизуем элементы, используя только название пользовательского атрибута данных:

[data-rating] {
  color: indigo;
}

Таким образом текст элементов с атрибутом data-rating окраситься в фиолетовый цвет.

Но можно более тонко подойти к возможностям пользовательских атрибутов для CSS, и применить стили к их определенным значениям:

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

И, наконец, с помощью CSS можно вывести сами значения пользовательских атрибутов:

[data-rating]::after {
  content: attr(data-rating);
}

В результате рейтинг (значения атрибута data-rating) будет добавлен после основного текста.

Спасибо за внимание.