Вы не просто бросаете всё в кучу. Вы кладёте носки в один ящик, рубашки — в другой, обувь — на полку. Почему? Чтобы найти нужное быстро, без копания в хаосе. Веб-страница — это тоже шкаф. А data-* атрибуты — этикетки на ящиках, которые видите только вы (и JavaScript). Браузер их игнорирует. Пользователь — не замечает. Но они делают ваш код чище, логичнее и управляемее. Это пользовательские атрибуты в HTML, которые начинаются с data-, за которым следует любое имя без заглавных букв и без двойных дефисов...