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

Question

С MVC и jQuery я значительно расширяю возможности использования CSS. Возник вопрос: как лучше всего использовать идентификаторы элементов по сравнению с классами? Если я использую ID элементов, селекторы в jQuery короче. Например:

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

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

#searchTool, #classifyTool .tag

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

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

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

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

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

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

2. Второй подход кажется более гибким и обслуживаемым. Мысли основаны на вашем опыте.

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

Спасибо

Answer 1

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

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

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

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

Answer 2

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

Кроме того, я склонен проводить различие между "структурой" и "стилем" CSS. Это означает, что я отделяю вещи, которые имеют дело с размером (шириной / высотой) и положением от классов CSS, которые делают font-weight, color и т. Д.

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