Следует ли мне избегать использования селекторов jQuery в классах CSS, определенных в таблицах стилей?

Question

Я занимаюсь использованием классов CSS, которые определены в таблицах стилей с моими селекторами jQuery. Причина этого заключается в том, что, когда класс CSS определен в таблице стилей, у разработчика / дизайнера есть много причин изменить имя класса или то, как он используется в html, который отделен от селектора jQuery, который также использует учебный класс. Нет ничего очевидного, что говорит разработчику / дизайнеру, что они должны учитывать функциональность JavaScript при внесении этого изменения.

Было бы лучше просто не связывать селекторы jQuery с легальными классами CSS, а вместо этого использовать классы CSS, которые не привязаны к каким-либо стилям и имеют, например, префикс, такой как 'j_', что делает его цель очевидной для использования исключительно как селектор jQuery? Это сделает связывание менее хрупким за счет дополнительного имени класса в разметке. Это также сделает механизмы проверки, которые находят неопределенные классы, менее полезными, но, надеюсь, префикс сделает очевидным, что эти классы служат цели в качестве селекторов jQuery.

....

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

Answer 1

Имя класса css должно описывать функцию элемента, а не стиль, к которому он применяется. Если у вас есть боковая панель, которая смещена влево, вызовите боковую панель класса, а не leftFloat. Таким образом, вы можете поместить стиль боковой панели в класс боковой панели в css и применить любые необходимые вам функции jquery.

Отредактировано для уточнения одного из комментариев: Вам не нужно переименовывать классы или идентификаторы элементов. Если у вас есть боковая панель, то, возможно, она изменится на панель инструментов или верхнюю панель навигации. Имеет ли значение, что он все еще называется боковой панелью? Пользователь никогда не замечает. Или вы можете дать все действительно абстрактные имена, такие как панель навигации и основной контент.

Я запустил веб-приложение с jQuery для внутреннего использования на прошлой неделе, и я изменил имя только одного идентификатора, потому что мне нужно было обобщить его больше. Кроме того, у каждого класса и идентификатора было одно и то же имя.

Answer 2

Я думаю, что ваша проблема чисто концептуальная. Атрибут class в HTML не определяет класс CSS. Он определяет семантический класс элемента. Так уж получилось, что CSS использует эти классы для применения стилей (во многом так же, как селекторы jQuery используют их для применения других функций). Ничто не мешает вам иметь классы, которые не определены в таблице стилей или не имеют информации о стиле вообще. Таким образом, все классы должны рассматриваться как часть кода, а не как стиль. Код диктует классы, CSS просто вставляет семантическую разметку для применения стилей. Таким образом, CSS никогда не должен диктовать имена классов, и ни один дизайнер не должен изменять имена классов. Я понимаю, что на первый взгляд это, вероятно, очень похоже на другие ответы, которые (очень правильно) советуют вам «использовать семантические имена», но здесь есть небольшая концептуальная разница: классы - это мастера, стили CSS - это рабы .

Ссылки: этот сайт делает мою точку зрения совершенно ясно; w3schools также кратко упоминает об этом.

Answer 3

Хорошо уважать разделение интересов. Но чтобы это работало, элементы должны называться семантически в зависимости от роли, которую они играют на странице.

Хорошо:

<div id="nav">...</div>
<div id="sidebar">...</div>
<ul class="productsList">
  <li>...</li>
</ul>

Bad:

<span class="Verdana11">...</span>
<div class="blueBox">...</div>
<ul class="bulletedList">
  <li>...</li>
</ul>

Etc. Обратите внимание, что элементы именуются в зависимости от того, какую функцию элемент выполняет на странице. Стили изменятся - вы можете на это рассчитывать. Но роли не должны (за исключением редизайна сайта, что обязательно означает, что вы все равно будете перекодировать). Таким образом, боковая панель всегда будет боковой панелью независимо от того, изменяется ли размер шрифта или удаляется ли граница в некоторой точке вниз по линии.

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

Answer 4

Я голосую за бережливый подход. Если у вас есть хорошие имена классов, которые имеют смысл для CSS и jQuery - используйте их. Если имена не имеют смысла для jQuery, добавьте новые или переименуйте существующие классы.

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

Answer 5

Я собирался опубликовать это в качестве комментария к Отличный ответ Мариуса , но он стал длинным, и я хотел добавить пример.

Не думайте о них как о "классах CSS". Это не так. Классы являются частью спецификации HTML и никак не связаны с CSS больше, чем с JavaScript.

Существуют классы для добавления информации в элементы HTML. Это новость? Это виджет? Это отключено? HTML не может указать эти свойства, кроме как с помощью классов. У некоторых классов есть информация о стиле, связанная с ними (у новостных элементов должны быть хорошо отформатированные заголовки, даты публикации и подписи), у некоторых есть функциональные возможности, связанные с ними (виджеты должны быть инициализированы), а у других - оба (элементы становятся отключенными программно и должен быть скрыт или "выцветший").

Абсолютно нет никаких причин не использовать одни и те же классы в CSS и JavaScript - если они соответствуют информации, которую представляет класс.

Answer 6

Я согласен с парнями, которые говорят, что CSS-классы должны быть семантическими и не отражать визуальный вид, но я все же думаю, что ваш вопрос велик в отношении "истинного" разделения между макетом и поведением.

Я думаю, что было бы лучше поместить классы, которые используются только сценарием, в отдельную таблицу стилей. Включите это через JS (поскольку это не нужно, если JS недоступен). Примером может быть «.hover» или «.current», очевидно, только если это делается с помощью сценариев, например, воздействия на элементы блочного уровня. На встроенных элементах вы, вероятно, просто используете псевдокласс CSS.

Как разработчик HTML / CSS, я мог бы иногда сталкиваться, когда люди говорят: «О, класс CSS уже есть, я могу просто зацепить это», но это совершенно нормально. Ведь атрибут class не является эксклюзивным для CSS. Это атрибут HTML. Что касается боязни удаления правил CSS, которые все еще используются в JS, давайте будем честными: с CSS на больших сайтах вы никогда не сможете быть полностью уверены в том, используется ли он в JS или HTML.

Answer 7

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

Представьте

<div class=css-class>
  <div class=script-class>
    <address> <!--for semantic "this is my homepage"-->

разве это не уродливо? Один div немного лучше. Один адрес немного даже лучше. Один класс немного даже лучше.

Проблема «они меняют классы» решается с помощью комментариев, тестов и тщательного редактирования.

Answer 8

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

Answer 9

Я склонен с вами согласиться: лучше отделить «визуальные» классы от «функциональных».

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