Зачем мне добавлять мои пользовательские атрибуты с помощью «data-»?

Question

Поэтому любые пользовательские данные атрибутов, которые я использую, должны начинаться с «data-»:

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Будет ли что-то плохое случится, если я просто игнорировать это? То есть:

<li class="user" name="John Resig" city="Boston" 
    lang="js" food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Я думаю, одна плохая вещь, что мои пользовательские атрибуты могут вступать в конфликт с HTML атрибуты со специальными значениями (например, name), но помимо этого, есть проблема с просто писать «example_text» вместо «данных example_text»? (Он не будет проверять, но кого это волнует?)

Answer 1

Есть несколько преимуществ для сохранения пользовательских атрибутов с префиксом data- *.

1. Это гарантирует, что в будущих выпусках не будет никаких столкновений с расширениями HTML. Это проблема, которая уже в некоторой степени встречается с некоторыми из новых атрибутов, введенных в HTML5, где существующие сайты используют атрибуты с тем же именем и ожидают различного и несовместимого пользовательского поведения. (Например, атрибут на input элементов required, как известно, были некоторые столкновения на некоторых популярных сайтах в прошлом)

2. После того, как браузеры поддерживают эту функцию, они обеспечивают более удобный DOM API для доступа к этим атрибуты из сценариев.

3. Они обеспечивают четкую индикацию того, какие атрибуты являются настраиваемыми атрибутами, а какие - стандартизованными атрибутами. Это не только помогает валидаторам, позволяя им разрешать любые атрибуты с данными, но при этом выполнять эффективную проверку ошибок для других атрибутов (например, улавливать опечатки), это также помогает сделать этот аспект исходного кода более понятным для тех, кто его читает, включая людей которые могут работать на веб-сайте после оригинального автора.

Answer 2

Согласно John Resig, вся цель добавления этих пользовательских атрибутов данных в sepcs HTML5 является возможность вставлять пользовательские данные в HTML в то же время действует ,

Если вы не заботитесь о проверке (и, как вы сказали, пользовательские атрибуты не сталкиваясь с существующими HTML атрибуты, как name, id, style и т.д.), то я думаю, вы не должны использовать префикс data-. Но учитывая, что это не огромная стоимость для написания действительного, совместимого кода, я не понимаю, почему вы этого не сделали.