Селекторы в CSS и jQuery: только класс / идентификатор или тег?

Question

Работая с селекторами классов / идентификаторов в CSS и в jQuery, я часто вижу два разных подхода:

1.Просто класс или идентификатор:

CSS:

.foo{}

#bar{}

jQuery:

$(".foo")

$("#bar")

2.Класс или идентификатор с его тегом:

CSS:

div.foo{}

div#bar{}

jQuery:

$("div.foo")

$("div#bar")

---

Мой вопрос таков: запретив использование тега для дальнейшего уточнения селектора, есть ли что-то неправильное в размещении тега с классом / идентификатором?Какой правильный синтаксис?

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

Что вы думаете?

Answer 1

С включенным тегом

$("div.foo") или div.foo{}

вы даете браузеру руку, говоря ему не искать каждый элемент с определенным классом или идентификатором.Вместо этого в приведенных выше примерах он будет выполнять поиск div s.

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

Различение между двумя элементами

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

Для специфичности

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

Лучше для общего кода / устранения неполадок / обновления

Также гораздо проще найти / изменить / отредактировать правила, когда элементвключено в правило.

РЕДАКТИРОВАТЬ

Чтобы ответить на комментарий @ stefmikhail о тесте @ YoTsumi, вот разница:

ПоискУникальный идентификатор всегда будет самым быстрым, так как на странице должен быть только один идентификатор, и движок должен искать его, и он один.Однако, как упомянул @BoltClock, в этом вопросе есть нечто большее, чем производительность.

Answer 2

Я просто написал тест для сравнения с и без тега.

http://jsperf.com/id-class-and-tag

Если вы ожидаете лучших результатов: не добавляйте тег!1007 *

Answer 3

Цитируя это из книги Уайли Smashing CSS "

Трудно сказать три раза быстро и даже сложнее понять, но это ключ к пониманию того, как правила CSS взаимодействуют друг с другом.Специфичность - это числовое представление «специфичности» селектора. Для определения специфики селектора используются три вещи:

1. Каждый дескриптор элемента дает 0,0,0,1.
2. Каждый дескриптор класса, псевдокласса или атрибута дает 0,0,1,0.
3. Каждый дескриптор ID дает 0,1,0,0.урод (пока)! Взгляните на несколько примеров: сначала div ul ul li 0,0,0,4 Четыре дескриптора элемента div.aside ul li 0,0,1,3 Один дескриптор класса, три дескриптора элемента a: hover 0,0,1,1 Один дескриптор псевдокласса, один дескриптор элемента div.navlinks a: hover 0,0,2,2 Один дескриптор псевдокласса, один дескриптор класса, два дескриптора элемента: hash: title em 0, 1,0,1 Один дескриптор идентификатора, один элемент descriptor h1: hash: title em 0,1,0,2 Один дескриптор идентификатора, два дескриптора элемента Надеемся, что это начинает давать вам представление о том, как создаются определенные значения города.Теперь, почему запятые?Потому что каждый «уровень» конкретной стоимости города, так сказать, сам по себе.Это означает, что селектор с одним дескриптором класса имеет больше специфики, чем селектор с 13 дескрипторами элементов. «Таким образом, уникальность переопределяющих стилей представлена ​​добавлением имен тегов, что касается jQuery, то относительно классов, которые вы всегда можете использовать перед селекторамиих как некоторые из имен классов, таких как «активный», можно применять к нескольким элементам (на уровне строки и на уровне блоков), что приводит к нежелательным эффектам. Надеюсь, это каким-то образом помогло ... Ура!

Answer 4

в jquery простой идентификатор - это самый быстрый способ найти элемент в документе, следующий (сейчас я говорю быстрее всего во всех версиях браузеров).Потому что jquery использует document.getElementById для поиска элемента DOM.Класс, с другой стороны, может быть сложным, sizzle будет работать на нем, и я действительно думаю, что div.foo быстрее, чем .foo, потому что с набором элементов выделяется меньше, чем с просмотром всех элементов в DOM.В современных браузерах есть селекторы запросов, которые будут работать быстрее, чем использование имени элемента (обратите внимание, что я не проводил тесты по этому вопросу).Старые браузеры будут находить div.class быстрее, чем .class, но в современных браузерах вы должны сделать наоборот.

Answer 5

Я полагаю, что более эффективно для механизма выбора (CSS или jQuery) быть как можно более конкретным (т. Е. Включать тег) - но вы никогда не заметите разницу.Вот цитата от создателя jQuery Джона Резига, в которой обсуждаются селекторы, которые люди используют в своем коде jQuery:

Например, «.class» гораздо более популярен, чем «tag.class», хотя второйгораздо более производительный.В этом особенно важно то, что степень снижения производительности не так уж важна.Например, разница между 4 мс и 30 мс практически незаметна.( Источник )

Answer 6

Лично я прыгаю между двумя, как зудящая сова ..

Иногда приятно видеть имя тега, чтобы напомнить вам (и вашим коллегам), с чем вы на самом деле работаете и с какимиповедение, которое вы можете ожидать.

Я думаю, что можно использовать и то и другое.

Пойдите с тем, что чувствуете себя наиболее естественно (не заставляет ваши глаза болеть)