Лучше ли стилизовать элемент на основе его состояния с помощью атрибута данных или класса?

Question

Лучше ли стилизовать элемент на основе его состояния с помощью атрибута данных или класса?

1

Мне интересно, что лучше всего подходит для стилизации элемента, основанного на его состоянии.

У меня есть некоторый контент, который может занять некоторое время, пока он загружается. Я хочу показать загрузчик загрузки.

Лучше ли применять класс "загрузки" к элементу до его загрузки, а затем удалить этот класс с помощью JS. Использование класса загрузки для рендеринга счетчика.

Или лучше отделить состояние загрузки от класса и использовать атрибут данных, т.е. [Data-status = "loading"]. Затем применяйте мои стили к атрибуту data, а не к классу.

Приветствия.

tomhughes 08 июнь 2017, в 16:15

Источник

Теги:

javascript

class

css

styles

custom-data-attribute

2 ответа

Ещё вопросы

vsync · Answer 1 · 2017-06-08T13-50-00.000Z

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

Обычно я использую data-view, но если это состояние загрузки, то я бы использовал класс и создавал какое-то обобщенное решение для всех вещей с этим классом loading чтобы выглядеть одинаково, если это возможно.

Простой пример, если у вас есть div который показывает некоторые данные, которые визуально представлены некоторым графиком/диаграммой, и пользователь может переключить представление этой области, чтобы стать "табличным" представлением, чем этот div будет выглядеть так:

состояние по умолчанию

<div class='myComponent' data-view='chart'>...</div>

состояние загрузки

<div class='myComponent loading'>...</div>

состояние альтернативного вида

<div class='myComponent' data-view='table'>...</div>

Я использую этот стиль кодирования широко, и он может быть вложенным. например, я обычно работаю на страницах SPA, где содержимое страницы изменяется в зависимости от URL-адреса, поэтому main элемент HTML может выглядеть так:

<main id="page" data-view="home">

И CSS:

#page[data-view="home"]{
...
}

Да, меня беспокоит состояние загрузки как класса, я использую только добавление счетчика загрузки с использованием псевдоэлементов, и, как я вижу, я не влияю напрямую на стили самого элемента.
@THughes - семантика состояний должна быть по class . точно так же, как если у вас есть какое-то меню или вкладки, и выбранный элемент должен иметь active класс, который представляет его состояние, то же самое происходит и с loading . это определенно должно быть классом. Уже более 12 лет я кодирую десятки веб-сайтов, так что мой мозг - это то, как мой мозг подключен :)

dennispreston · Answer 2 · 2017-06-08T11-50-00.000Z

Как правило, класс является поводом для визуальных изменений.

Согласно W3C...

данные

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

учебный класс

Атрибут class имеет несколько ролей в HTML: как селектор таблицы стилей (когда автор хочет присвоить информацию стилей набору элементов). Для обработки общего назначения агентами пользователя.