Хранение данных в классах или стилизация с атрибутами данных. Что лучше?

Question

У меня есть некоторые элементы, в которых должны быть сохранены некоторые данные и применены некоторые стили.

Допустим, у меня есть сетка 4 x 4, например:

http://jsfiddle.net/tM6ze/1/

Мне нужно хранить координаты каждой ячейки и использовать их с помощью javascript, но также иметь возможность стилизовать их индивидуально.

Я знаю, что могу сохранить данные в самом классе следующим образом:

<div class="cell row-3 col-3"></div>

и анализируем их в js

Я также знаю, что могу стилизовать ячейки в css:

.grid .cell[data-row="3"][data-col="3"]{...some style...}

Однако оба эти подхода медленнее, чем альтернативы(получить данные из атрибутов данных и стиль с классами) я полагаю.

Так какой из них является более эффективным?Или какой из них лучше в каких ситуациях?

Я полагаю, что я могу включить и классы, и данные в элементы (как в скрипке), но это лучший подход?

Answer 1

Я бы склонялся к использованию данных просто потому, что class имеет несколько значений и должен быть либо проанализирован, либо сопоставлен.

Более того, ваш подход к использованию классов сводится к взлому.Вы храните данные;почему вы не должны использовать атрибуты данных?

Плюс, атрибуты data- - это просто новый тип атрибута HTML, и вы должны иметь возможность манипулировать ими, даже если браузер не поддерживает HTML5 (хотя и немного больше работы).

Наконец, библиотеки (фреймворки, как угодно), такие как jQuery, имеют встроенные методы для чтения атрибутов data-, которые (если вы будете использовать их в будущем) упростятВаш код безмерно.

Нет ничего неправильного с использованием классов, как вы это сделали;это просто не нужно.Теги данных более уместны, понятны и ими легче манипулировать.