Что лучше использовать ID или class?

Question

[Artiom Zenevich]

Аллоха!
Вопрос наверное из разряда заезженных, но все же задам.
Какой из этих атрибутов лучше использовать, и какие недостатки имеют id и class? Много споров видел на данную тему, но почему-то так и не увидел внятного ответа. Заметил что многие используют class нежели id.

И все же интересно знать;)

P.S Хотелось бы увидеть внятный объемный ответ или пояснение. Холливары не к месту.

Заранее спасибо всем за ответы !!!

Answer 1

[Павел Радьков]

Недавно отвечал в соседней теме. Скопировал сюда.

1. Айдишник можно использовать на странице один раз. Два и более раза — это уже не валидно. Поэтому, если понадобится переделать сайт по схеме «три колонки → блок от края до края → снова три колонки» на одной странице, этот кусок кода придется полностью переписывать.

2. На один элемент можно повесить только один айдишник, а классов на один элемент можно повесить много. Получается, если вешать стили на id, мы лишаемся гибкости.

3. У айдишников слишком высокий вес селектора. Если вам понадобится контекстно перестилить что-то внутри колонки, то вероятнее всего вы впишите в селектор айдишник и потом, чтобы обнулить овверрайд или сделать новый, вам придется использовать этот же айдишник (или поставить другой). Классами перебить селектор с айдишником не получится — не хватит веса. Айдишник будет множиться в css-ке и реффакторить становится всё сложнее.

Поэтому выводы: 1) никогда не вешать на айдишники стили; 2) если нет выбора, писать селектор так: div[id="left"] {...} — этот селектор медленнее, чем селектор по классу, но и вес у него на равне с классом. Т.е. это меньшее зло, чем айдишник в стилях.

Comments

[Павел Радьков]

Скопировал из вопроса Как вы создаёте адаптивный дизайн и всегда ли это нужно?

[Artiom Zenevich]

Спасибо, очень объемно и по полочкам как и хотел)))

Answer 2

[Алексей Струков]

Внутри css лучше использовать классы, а внутри js лучше id, кроме случаев когда нужно выбрать именно несколько элементов одиного класса.

Answer 3

[Дмитрий]

Когда в коде появляется ID, где-то в мире грустит котёнок...

Answer 4

[IceJOKER]

softwaremaniacs.org/blog/2006/01/22/id-class-difference
webo.in/articles/habrahabr/38-css-efficiency-tests-3
https://habrahabr.ru/post/153409/
первые три ссылки из поиска и таких сотни тысяч, думаете здесь будет другой ответ?

Answer 5

[Neyury]

Для создания стилей (css) используйте классы, id в основном используется для работы с js

Answer 6

[Алексей Черток]

Лучше всего использоваться class так как его можно плодить сколько тебе угодно, где ID только 1 одинаковый на страницу. Валидность мой друг, валидность ...

Answer 7

[zooks]

Всегда использовать Class, если не уверены что нужно. ID перекрывает CSS правила, поэтому рекомендуется использовать его в основном для якорей и для JavaScript.