Могу ли я использовать несуществующие классы 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. См. комментарий Руаха. Будь то или не селектор является допустимым полностью зависит от синтаксиса селекторов и CSS имеет свой собственный набор правила обработки ошибок парсинга, ни один из которых не касаются разметки вообще. По сути, это означает, что HTML и CSS полностью независимы друг от друга в аспекте валидности.1
Как только вы поймете, что становится ясно, что нет никакого побочного эффекта не определение
.targetправило в таблице стилей.2 при назначении классы к вашим элементам, вы можете ссылаться на эти элементы по этим классам либо в таблице стилей, либо в скрипте, либо в обоих. Ни один из них не зависит от другого. Вместо этого они оба ссылаются на разметку (или, точнее, ее представление DOM). Этот принцип применяется, даже если вы используете JavaScript для применения стилей, как вы делаете в своем jQuery one-liner.когда вы пишете правило CSS с селектором классов, все, что вы говорите: "Я хочу применить стили к элементам, которые принадлежат этот класс."Точно так же, когда вы пишете сценарий для извлечения элементов по определенному имени класса, вы говорите: "Я хочу делать вещи с элементами, которые принадлежат этому классу.- Есть там или нет are элементы, которые принадлежат к рассматриваемому классу, - это отдельная проблема.
1вот почему селектор идентификатора CSS соответствует все элементы с заданным идентификатором независимо о том, появляется ли идентификатор точно один или несколько раз (что приводит к несоответствию 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поэтому разработчики переднего плана никогда не используют эти классы для стилизации элементов. Они должны понимать, что эти классы могут быть удалены в любое время.
в тот момент, когда вы добавляете класс в свой HTML, класс будет определен, поэтому ваше решение полностью нормально
Это не обязательно определять CSS классы в таблице стилей. Он должен работать просто отлично. Однако, добавление его не повредит.
одна вещь, о которой здесь никто не упоминал, заключается в том, что JavaScript (в данном случае с помощью jQuery) не может напрямую изменять каскадную таблицу стилей документа. в jQuery
css()метод просто изменяет согласованный набор элементов'styleсобственность. CSS и JavaScript совершенно не связаны в этом аспекте.
$('.target').css('display','none');не меняет.target { }объявление CSS вообще. Вместо этого здесь произошло то, что любой элемент сclassиз "цели" теперь выглядит что-то вроде этого:<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", вы должны просто распознать семантику класса и ID, чтобы быть группами и отдельными элементами соответственно.
Я хотел сказать, как я чувствовал, что важный момент не был затронут приведенный пример. Если вам когда-нибудь понадобится сделать визуальные манипуляции с переменной длиной элементов (в этом случае вы используете строки таблицы), то это всегда имеет смысл признать, что стоимость выполнения этого через Javascript потенциально может быть очень дорогой (например, если у вас есть тысячи строк).
в этой ситуации предположим, что мы знаем, что столбец 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"). Страница проекта имеет хорошее описание и примеры. Я использую этот плагин для больших проектов, потому что мне очень нравится держать классы для укладки целей.