Можно ли использовать не существующие классы CSS?

У меня есть таблица, где я показываю/скрываю полный столбец jQuery через класс CSS, который не существует:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

С помощью этой DOM я могу сделать это в одной строке через jQuery: $('.target').css('display','none');

Это работает отлично, но верно ли использовать классы CSS, которые не определены? Должен ли я создать для него пустой класс?

<style>.target{}</style>

Есть ли какие-либо побочные эффекты или есть лучший способ сделать это?

ОТВЕТЫ

Ответ 1

"Класс CSS" является неправильным; class - это атрибут (или свойство с точки зрения сценариев), который вы назначаете элементам HTML. Другими словами, вы объявляете классы в HTML, а не в CSS, поэтому в вашем случае класс "target" действительно существует на этих конкретных элементах, и ваша разметка совершенно корректна, как есть.

Это не обязательно означает, что вам нужно иметь класс, объявленный в HTML, прежде чем вы сможете использовать его в CSS. См. Комментарий к руаху. Независимо от того, действительно ли селектор полностью зависит от синтаксиса селектора, а CSS имеет свой собственный набор правила обработки ошибок анализа, ни одна из которых не касается разметки вообще. По сути, это означает, что HTML и CSS полностью независимы друг от друга в аспекте действительности. (Именно поэтому селектор идентификаторов CSS соответствует всем элементам с данным идентификатором, независимо от того, отображается ли идентификатор ровно один раз или несколько раз (что приводит к несоответствующему HTML-документу).)

Как только вы это понимаете, становится совершенно ясно, что не существует побочного эффекта не определения правила .target в вашей таблице стилей. 1 Когда вы назначаете классы своим элементам, вы можете ссылаться на эти элементы этих классов либо в script, либо в таблице стилей, либо в обоих. Ни одна из них не зависит от другой. Вместо этого они ссылаются на разметку (точнее, на DOM, представляющую ее). Этот принцип применяется, даже если вы используете JavaScript для применения стилей, как вы это делаете в одном слое jQuery.

Когда вы пишете правило CSS с селектором классов, все, что вы говорите, это "Я хочу применять стили к элементам, которые имеют этот класс". Аналогично, когда вы пишете script для извлечения элементов определенным именем класса, вы говорите: "Я хочу делать вещи с элементами, которые имеют этот класс". Независимо от того, существуют ли элементы с рассматриваемым классом, это отдельная проблема.

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

Ответ 2

Нет вредных эффектов для использования классов, не имеющих стилей. Действительно, эта часть полезности CSS заключается в том, что она дезактивирована из разметки и может стилизовать или не стилизовать элементы/классы/и т.д. при необходимости.

Не считайте их "классами CSS". Думайте о них как о "классах", которые CSS также использует, если это необходимо.

Ответ 3

Согласно спецификация HTML5:

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

Кроме того, в версия 4:

Атрибут class имеет несколько ролей в HTML:

  • В качестве селектора стилей (когда автор хочет присвоить стиль информация к набору элементов).
  • Для обработки общего назначения пользовательских агентов.

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

Ответ 4

Вы можете использовать класс, который не имеет стилей, это полностью допустимый HTML.

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

Ответ 5

Когда вы используете имя класса в JavaScript, он не смотрит на CSS, чтобы найти этот класс. Он выглядит прямо в HTML-коде.

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

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

(обратите внимание, что вышеприведенный параграф, очевидно, более применим к более крупным проектам, поэтому не чувствуйте, что вам нужно идти в эту крайность, если вы работаете самостоятельно, я упомянул об этом, чтобы подчеркнуть, что эти два могут быть полностью отдельным)

Ответ 6

Вы можете использовать CSS классы, не используя его, но я предлагаю, что если вы добавляете классы CSS только для кода JavaScript/jQuery, префикс с ним js-YourClassName, поэтому разработчики front-end никогда не используют эти классы для стилизации элементов. Они должны понимать, что эти классы могут быть удалены в любое время.

Ответ 7

В тот момент, когда вы добавите класс в свой HTML, класс будет определен, поэтому ваше решение полностью прекрасное.

Ответ 8

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

Ответ 9

Одна вещь, о которой никто здесь полностью не упомянул, заключается в том, что JavaScript (с помощью jQuery в этом случае) не может напрямую изменять каскадную таблицу стилей документа. Метод jQuery css() просто изменяет свойство набора элементов style. CSS и JavaScript полностью не связаны в этом аспекте.

$('.target').css('display','none'); не изменяет ваше объявление .target { } CSS вообще. Здесь произошло то, что любой элемент с class "target" теперь выглядит примерно так:

<element class="target" style="display:none;"></element>

Есть ли побочные эффекты, вызванные не предварительным определением правила стиля CSS? Ничего.

Есть ли лучший способ сделать это? Производительность, да, есть!

Как улучшить производительность?

Вместо прямого изменения style для каждого элемента вместо предопределить новый класс и добавить его к вашим согласованным элементам с помощью addClass() (другой метод jQuery).

На основе этот ранее существующий JSPerf, который сравнивает css() с addClass(), мы можем видеть, что addClass() на самом деле быстрее:

css() vs addClass()

Как мы можем реализовать это сами?

Во-первых, мы можем добавить в наше новое объявление CSS:

.hidden {
    display: none;
}

Ваш HTML останется прежним, этот предварительно определенный класс просто на месте для последующего использования.

Теперь мы можем изменить JavaScript для использования addClass():

$('.target').addClass('hidden');

При запуске этого кода вместо прямого изменения свойства style для каждого из ваших соответствующих целевых элементов теперь будет добавлен новый класс:

<element class="target hidden"></element>

С новым "скрытым" классом этот элемент наследует стиль, объявленный в вашем CSS, и ваш элемент будет больше не отображаться.

Ответ 10

Как уже упоминалось многими другими, да, использование классов без назначенного CSS совершенно корректно и вместо того, чтобы думать о них как о "классах CSS", вы должны просто признать семантику класса и идентификатора как группы и отдельных элементов соответственно,

Я хотел почистить, так как я чувствовал, что важный момент не был поднят с учетом примера. Если вам когда-либо понадобится делать визуальные манипуляции с переменной длиной элементов (в этом случае вы используете строки таблицы), тогда всегда имеет смысл признать, что затраты на это через Javascript могут быть очень дорогими (например, если у вас есть тысячи строк).

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

table.target-hidden .target { display: none; }

Затем вместо того, чтобы использовать JS для прохождения через DOM-поиск N элементов, нам просто нужно переключить класс на один (наша таблица).

$("table").addClass("target-hidden")

Назначив таблице идентификатор, это будет еще быстрее, и вы даже можете просто обратиться к столбцу с помощью селектора :nth-child, который уменьшит вашу разметку, но я не могу прокомментировать эффективность. Другая причина для этого заключается в том, что я ненавижу встроенный стиль и пойдет на многое, чтобы его искоренить!

Ответ 11

Это не будет иметь никакого эффекта, если вы примените класс к элементу HTML, и этот класс не определен в CSS. Это обычная практика, и, как сказал Аамир африди, если вы используете классы только для целей js, то рекомендуется использовать префикс js-.

Это не только допустимо для calsses, но и для атрибута id элементов html.

Ответ 12

Нет никаких проблем при использовании классов для простого запроса элементов. Я использовал такие имена классов как префикс sys- (например, я назову ваш класс sys-target), чтобы отличить их от классов, используемых для стилизации. Это было соглашение, используемое некоторыми разработчиками Microsoft в прошлом. Я также заметил растущую практику использования префикса js- для этой цели.

Если вам не нравится использовать классы для целей, отличных от стиля, я рекомендую использовать плагин Role.js jQuery, который позволяет вам достичь с той же целью, используя атрибут role, поэтому вы можете написать свою разметку как <td role="target"> и запросить ее с помощью $("@target"). Страница проекта имеет хорошее описание и примеры. Я использую этот плагин для больших проектов, потому что мне очень нравится поддерживать классы только для стилей.

Ответ 13

Обратитесь к jQuery механизму проверки. Даже там мы также используем несуществующие классы для добавления правил проверки атрибутов HTML. Таким образом, нет ничего плохого в использовании классов, которые фактически не объявлены в таблице стилей.