Оптимизация CSS: идентификатор элемента по сравнению с классом

С MVC и jQuery я значительно больше использую CSS. Вопрос, который пришел на ум, - это лучший подход для использования Element ID по сравнению с классами. Если я использую Element ID, селектора в jQuery короче. Например:

#imageTag... $('#imageTag')
#searchTag... $('#searchTag')

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

#searchTool, #classifyTool .tag

В этом случае селектора, такие как

$('# searchTool.tag') или $('# classifyTool.tag')

. Этот подход может быть особенно полезен, если на странице есть несколько экземпляров класса, например,.tag. Вы просто изменяете родительский объект-контейнер.

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

Итак, есть два вопроса:

Есть ли какое-либо влияние на производительность страницы /CSS или jQuery, если на странице есть большое количество стилей?
Второй подход выглядит более гибким и удобным. Мысли основаны на вашем опыте.

Есть ли лучший альтернативный подход?

Спасибо

Ответ 1

Идентификаторы являются самыми быстрыми
Названия тегов следующие быстро:
Имена классов без имени тега являются самыми медленными

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

Попробуйте не использовать селектор (в CSS или jQuery), например ".class". Вы заставляете jQuery или браузер в основном перемещаться по всему дереву документа. В большинстве случаев класс будет применяться только к одному типу тега, поэтому укажите его (например, "div.class" ). Это само по себе может сделать разницу в производительности огромной (особенно в jQuery с большим документом).

Длина селектора не должна рассматриваться. Производительность, читаемость и ремонтопригодность должны быть.

Ответ 2

Обычно я предпочитаю метод класса. Причина в том, что вам не нужно писать новый селектор css для каждого нового элемента ID'd в вашей системе.

Кроме того, я предпочитаю различать "struct" и "style" css. Смысл, что я отделяю вещи, которые имеют дело с размером (шириной/высотой) и положением из классов css, которые делают шрифт-вес, цвет и т.д.

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