Добавление множества классов CSS к элементам HTML

Question

У меня есть доска объявлений, и один из моих пользователей написал скрипт greasemonkey для стилизации различных элементов на странице. Он проделал большую работу с ним, но для того, чтобы облегчить его работу, первым шагом в его сценарии является анализ текущей страницы и добавление нескольких классов CSS почти ко всем элементам HTML на странице. большинство из них вообще не используются для стилизации страницы, а вместо этого для облегчения запроса к паре элементов на странице, которые он фактически изменит. например class="thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345" и т. д.

это стандартная практика? есть ли недостатки в добавлении большого количества ненужных классов CSS, либо в javascript, либо на сервере, если я добавлю их и на обслуживаемые страницы.

Answer 1

Просто для точки данных, я вчера посмотрел на HTML GMail (их кнопки очень хороши), и он полон такого рода вещей.

Вот пример:

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"

Answer 2

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

HTML, к сожалению, не дает много альтернативных способов, когда речь идет о метаданных, кроме вставки в недопустимые атрибуты, поэтому существует механизм, который добавляет семантическое значение атрибуту "class" в существующих тегах, а именно 1003 * микроформатами . Вокруг микроформатов много шумной шумихи, но в целом они вращаются вокруг лучшей практики для областей, где использование полностью xml исключено.

Answer 3

Если нет связанного стиля с классом, который назначен элементу, то я думаю, что браузер просто проигнорирует его. Так что это не увеличит время обработки вашей страницы, если это то, что вас беспокоит.

Однако, если для каждого элемента имеется множество классов, вы должны понимать, что вы используете полосу пропускания и увеличиваете время, необходимое для загрузки всей страницы таким образом. Вы можете избежать этой проблемы, экспортируя CSS, чтобы браузер мог его кешировать.

Используете ли вы jquery для запроса элементов, которые вы действительно хотите изменить? Может оказаться, что проще выбрать те элементы с помощью селекторов jquery, которые кажутся сложными или невозможными при использовании стандартного JavaScript, и, таким образом, вы можете избежать всех этих лишних ненужных классов.

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

Answer 4

С точки зрения семантики, да, есть и недостатки. Если у вас есть классы, которые не описывают, что это за элемент на самом деле и предназначены только для стилизации, это может повредить вам в будущем, если вы решите изменить или реструктурировать.

например, BAD:

<div class="header red left-side">

ХОРОШО:

<div class="header main current-event">

Answer 5

Классы предназначены не только для CSS, они для классификации разделов разметки. Применение стилей на основе этой категоризации - это всего лишь одно из применений. Так что, если классы полезны для других целей категоризации, это нормально, и это очень хорошая практика.