Добавление множества 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

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

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

Answer 2

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

, например, BAD:

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

ХОРОШО:

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

Только для точки данных я вчера взглянул на HTML-код GMail (их кнопки очень приятные), и он полон такого рода вещей.

Вот пример:

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