Мне интересно, что лучше всего подходит для стилизации элемента, основанного на его состоянии.
У меня есть некоторый контент, который может занять некоторое время, пока он загружается. Я хочу показать загрузчик загрузки.
Лучше ли применять класс "загрузки" к элементу до его загрузки, а затем удалить этот класс с помощью JS. Использование класса загрузки для рендеринга счетчика.
Или лучше отделить состояние загрузки от класса и использовать атрибут данных, т.е. [Data-status = "loading"]. Затем применяйте мои стили к атрибуту data, а не к классу.
Приветствия.
Когда определенная область (элемент 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"]{
...
}
Как правило, класс является поводом для визуальных изменений.
Согласно W3C...
Атрибуты пользовательских данных предназначены для хранения конфиденциальных данных на странице или приложении, для которых нет более подходящих атрибутов или элементов. Эти атрибуты не предназначены для использования программным обеспечением, которое не зависит от сайта, использующего атрибуты.
Атрибут class имеет несколько ролей в HTML: как селектор таблицы стилей (когда автор хочет присвоить информацию стилей набору элементов). Для обработки общего назначения агентами пользователя.
class
. точно так же, как если у вас есть какое-то меню или вкладки, и выбранный элемент должен иметьactive
класс, который представляет его состояние, то же самое происходит и сloading
. это определенно должно быть классом. Уже более 12 лет я кодирую десятки веб-сайтов, так что мой мозг - это то, как мой мозг подключен :)