Можно ли использовать несуществующие классы 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>
есть ли какие-либо побочные эффекты или есть лучший способ сделать это?
13 ответов
" класс CSS " - неправильное название;class - это атрибут (или свойство, с точки зрения сценариев), который вы назначаете HTML-элементам. Другими словами, вы объявляете классы в HTML, а не CSS, поэтому в вашем случае" целевой " класс тут фактически существуют на этих конкретных элементах,и ваша разметка совершенно действительна.
это не обязательно означает, что вам нужно иметь класс, объявленный в HTML, прежде чем вы сможете использовать его в CSS. Увидеть ruakh комментарий. Ли или недопустимый селектор полностью зависит от синтаксиса селекторов и CSS имеет свой собственный набор правила обработки ошибок парсинга, ни один из которых не касаются разметки вообще. По сути, это означает, что HTML и CSS полностью независимы друг от друга в аспекте валидности.1
Как только вы это понимаете, становится ясно, что нет никакого побочного эффекта не определения .target правило в таблице стилей.2 при назначении классы к вашим элементам вы можете ссылаться на эти элементы этими классами либо в таблице стилей, либо в скрипте, либо в обоих. Ни один из них не зависит от другого. Вместо этого они оба ссылаются на разметку (или, точнее, ее представление DOM). Этот принцип применим, даже если вы используете JavaScript для применения стилей, как это делается в вашем jQuery one-liner.
когда вы пишете правило CSS с селектором классов, все, что вы говорите: "Я хочу применить стили к элементам, которые принадлежат этот класс. Аналогично, когда вы пишете сценарий для извлечения элементов с определенным именем класса, вы говорите: "Я хочу делать вещи с элементами, принадлежащими этому классу.- Есть там или нет!--3-- > are элементы, принадлежащие к рассматриваемому классу, являются отдельной проблемой.
1вот почему селектор CSS ID соответствует все элементы с заданным идентификатором независимо о том, появляется ли ID точно один или несколько раз (что приводит к несоответствию HTML-документа).
2единственная ситуация, о которой я знаю, когда такое пустое правило CSS необходимо, - это когда некоторые браузеры отказываются применять определенные другие правила должным образом в результате ошибки; создание пустого правила приведет к тому, что эти другие правила будут применяться по какой-то причине. См.ответ для примера такой ошибки. Однако это на стороне CSS и поэтому должно иметь ничего общего с разметкой.
нет никаких вредных эффектов для использования классов, которые не имеют стилей. Действительно, это часть полезности CSS заключается в том, что он де-связан с разметкой и может стилизовать или не стилизовать элементы/классы/и т. д. по мере необходимости.
Не думайте о них как о " классах CSS."Думайте о них как о" классах", которые CSS также использует, если это необходимо.
по данным спецификация HTML5:
атрибут класса должен иметь значение, представляющее собой набор разделенных пробелами токены, представляющие различные классы, к которым принадлежит элемент. ... Нет никаких дополнительных ограничений на токены, которые авторы могут использовать в атрибут class, но авторам рекомендуется использовать значения, которые опишите характер содержания, а не значения, которые описывают нужные презентации содержание.
также в вариант 4:
атрибут class имеет несколько ролей в HTML:
- в качестве селектора таблицы стилей (когда автор хочет назначить стиль информация к набору элементов).
- для общей обработки цели агент пользователя.
ваш вариант использования подпадает под второй сценарий, что делает его законным примером использования класса атрибут.
вы можете использовать класс, который не имеет стилей, это полностью допустимый HTML.
класс, на который ссылается файл CSS, не является определением класса, он используется как правила селектора для целей стилизации.
когда вы используете имя класса в JavaScript, это не посмотрите на CSS, чтобы найти этот класс. Он выглядит непосредственно в HTML-коде.
все, что требуется, это то, что имя класса находится в HTML. Это не должно быть в CSS.
в самом деле, многие люди думают, что это на самом деле хорошая идея сохранить отдельные классы с использованием CSS и Javascript, поскольку это позволяет вашим дизайнерам и кодерам работать независимо, не входя друг друга, используя классы друг друга.
(обратите внимание, что приведенный выше абзац, очевидно, более применим для более крупных проектов, поэтому не чувствуйте, что вам нужно идти на эту крайность, если вы работаете самостоятельно; я упомянул об этом, чтобы подчеркнуть, что они могут быть полностью разделены)
можно использовать в CSS классы без его использования, но я предлагаю, чтобы если вы добавляете классы CSS только для кода JavaScript / jQuery, префикс с ним js-YourClassName таким образом, разработчики front-end никогда не используют эти классы для стиля элементов. Они должны понимать, что эти классы могут быть удалены в любое время.
в тот момент, когда вы добавляете класс в свой HTML, класс будет определен, поэтому ваше решение полностью нормально
нет необходимости определять в CSS классы в таблице стилей. Это должно сработать просто отлично. Однако добавление этого не повредит.
одна вещь, которую никто здесь не упомянул полностью, заключается в том, что JavaScript (с помощью jQuery в этом случае) не может напрямую изменять каскадную таблицу стилей документа. в jQuery css() метод просто изменяет согласованный набор элементов'style собственность. CSS и JavaScript совершенно не связаны в этом аспекте.
$('.target').css('display','none'); не меняет .target { } объявление CSS вообще. Вместо этого здесь произошло то, что любой элемент с class из "target" теперь выглядит что-то вроде этого:--17-->
<element class="target" style="display:none;"></element>
существуют ли какие-либо побочные эффекты, вызванные не предварительным определением правила стиля CSS? Ни малейшего.
есть ли лучший способ сделать это? Производительность-мудрая, да есть!
как можно улучшить производительность?
вместо прямого изменения style каждого элемента, вместо этого вы можете предварительно определите новый класс и добавьте его к соответствующим элементам с помощью addClass() (еще один jQuery метод.)
на основе это уже существующий JSPerf, который сравнивает css() С addClass(), мы видим, что addClass() на самом деле гораздо быстрее:
как мы можем реализовать это сами?
во-первых, мы можем добавить в нашу новую декларацию CSS:
.hidden {
display: none;
}
ваш HTML останется прежним, этот предварительно определенный класс просто на месте для последующего использования.
теперь мы можем изменить JavaScript на использовать addClass() вместо:
$('.target').addClass('hidden');
при запуске этого кода, а не непосредственно изменять style свойство каждого из ваших сопоставленных" целевых " элементов, этот новый класс теперь будет добавлен:
<element class="target hidden"></element>
С новым "скрытым" классом этот элемент унаследует стиль, объявленный в вашем CSS, и ваш элемент больше не будет отображаться.
как упоминалось многими другими, да, использование классов без назначенного CSS совершенно верно, и вместо того, чтобы думать о них как о "классах CSS", вы должны просто распознать семантику class и ID, чтобы быть группами и отдельными элементами соответственно.
Я хотел сказать, как я чувствовал, что важный момент не был затронут приведенный пример. Если вам когда-либо нужно делать визуальные манипуляции с переменной длиной элементов (в этом случае вы используете строки таблицы), то это всегда имеет смысл признать, что стоимость этого через Javascript потенциально может быть очень дорогой (e.g если у вас тысячи строк).
в этой ситуации, скажем, мы знаем, что столбец 2 всегда имеет потенциал быть скрытым (это сознательная функция вашей таблицы), тогда имеет смысл разработать стиль CSS для обработки этого варианта использования.
table.target-hidden .target { display: none; }
тогда вместо того, чтобы использовать JS для прохождения через DOM, находя N элементов, нам просто нужно переключить класс на один (наш стол.)
$("table").addClass("target-hidden")
назначив таблице идентификатор, это было бы еще быстрее, и вы могли бы даже просто ссылаться на столбец, используя :nth-child селектор, который уменьшит вашу разметку дальше, но я не могу комментировать эффективность. Еще одна причина для этого заключается в том, что я ненавижу встроенный стиль и приложу все усилия, чтобы искоренить его!
Это не будет иметь никакого эффекта, если вы применяете класс к элементу HTML, и этот класс не определен в CSS. Это обычная практика, и, как сказал Аамир Африди, если вы используете классы только для js, хорошей практикой является их префикс js- .
он действителен не только для calsses, но и для атрибута id html-элементов.
нет никаких проблем с использованием классов для простого запроса элементов. Раньше я давал такие имена классов sys- префикс (например, я назову свой класс sys-target), чтобы отличить их от классов, используемых для стайлинга. Это было соглашение, используемое некоторыми разработчиками microsoft в прошлом. Я также заметил растущую практику использования js- префикс для этой цели.
Если вам неудобно использовать классы для целей, отличных от стиля, я рекомендую использовать роль.js jQuery плагин, который позволяет достичь той же цели, используя role атрибут, поэтому вы можете написать свою разметку как <td role="target"> и запрос для него с помощью $("@target"). Страница проекта имеет хорошее описание и примеры. Я использую этот плагин для больших проектов, потому что мне очень нравится держать классы только для стилизации.