Почему используют class вместо явного id?

Question

[Jack OXO]

На многих качественных сайтах вижу использование только классов, вместо id, хотя на странице такой только один элемент. Например, теже wrapper, header, sidebar, везде это классы. Почему id не используется? Спасибо.

Answer 1

[Александр Цымбал]

тут несколько моментов:
1. id имеет очень большой приоритет css. объяснить двумя словами тяжело, но вкратце, если вы задали какие-то свойства для id-селектора #x, что ни пишите в классовом селекторе .y, если он подтягивает стили от id-селектора, то они возьмут верх над классовым селектором. Никакие элементы не должны иметь приоритет над другими. Так удобнее редактировать стили.
2. Есть неписанные "законы" БЭМ, которых придерживаются опытные разработчики. Существует много всяких философий БЭМ, самая популярная - яндексовская - погуглите. БЭМ позволяет лучше разбираться в коде, работать с препроцессорами и производить более удобные операции при работе в js.
...ну есть и еще несколько моментов.

Главное отличие id от class в том, что стили id нужно задавать для одного элемента, уникального. А class можно применять для нескольких элементов. Даже если при разработке блок один, никогда не угадаешь, возможно придётся добавлять примерно такой же блок где-нибудь еще на странице - в таком случае id дублировать нельзя - ошибка css.

Вообще, товарищи, используйте id никогда! Class куда удобнее и гибче (хотя бы в том плане, что для одного элемента можно задавать хоть 255 классов одновременно). Придумывались CSS-селекторы в конце 90х годов. Тогда HTML был совершенно на другом уровне, и разработчики смотрели в другую сторону. Им тогда хотелось управлять DOM с помощью JS методом GetElementByID - сейчас этот метод в чистом виде никто не использует. Есть жквери!

Comments

[Jack OXO]

Я конечно не просил объяснять в чем разница между css и id, но все равно за труд спасибо. Понял, что с js с ним работать проще и по сути могут быть несколько header и footer у article например. Тьфу, точно, как это я раньше не догадался =)

[Mikhail Osher]

Очень смешно. Никто не использует. Вы числа тоже на jQuery складываете? Или нативный JS слишком сложный? ахахха

[Александр Цымбал]

Mikhail Osher: я знаю JS, я его учил, когда Jquery еще не было. А сегодня 98 из 100 скриптов я пишу на jQuery. Разумеется, складываю числа, используя синтаксис js, но в подавляющем количестве случаев происходят эти операции уже внутри jQuery-конструкций. А вам я посоветовал бы не умничать. Если поняли, что я имел в виду изначально, за формулировки цепляться не надо. Вы не самый умный здесь. Таких как вы умников здесь очень много.

[Сергей Протько]

OXOJeck: использовать ID в js тоже рекомендую только в очень крайних случаях, когда без этого никак и вы на 100% уверены что элемент уникален. Обычно это какие-то поповеры или контролы сгенерированные из JS. В остальном лучше завязываться на классы и data-* атрибуты.

[Mikhail Osher]

Александр Цымбал: я не умничаю, и не говорю, что самый умный. Но не надо умничать и говорить, что никто не использует нативный JS.

[Александр Цымбал]

Mikhail Osher: если бы вы были достаточно умным, то заметили бы, что я ни разу не написал: "никто не использует нативный JS". Я написал, что никто не пользуется методом GetElementByID нативного JS, вместо него все используют гораздо более удобный jQuery('selector'). Читайте внимательнее, пожалуйста, перед тем как умничать.

Answer 2

[Алексей Елецкий]

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

Comments

[Jack OXO]

Не, ну это же не про основные элементы...

[Алексей Елецкий]

И что? Зачем с ними обращаться по-особому, если можно так как со всеми. Это немного уменьшает суммарную сложность проекта.

[Jack OXO]

Алексей Елецкий: ок )

Answer 3

[Константин Б.]

id это уникальный идентификатор, предназначенный скорее для JS нежели CSS, например в каталоге у каждого товара будет вид

<ul>
<li id="1" class="product"></li>
<li id="2" class="product"></li>
<li id="3" class="product"></li>
<li id="4" class="product"></li>
<li id="5" class="product"></li>
<li id="6" class="product"></li>
</ul>

где с помощью класса мы задаем всем элементам одинаковый вид, а при клике по кнопке купить посылаем id товара в корзину

Answer 4

[Александр Маджугин]

А почему в PHP и Js нет статической типизации?
На самом деле фундаментальные корни одни и те же. Web-разработчики привыкли к постоянному бардаку и хаосу в своих продуктах. Никогда нельзя сказать, сколько завтра будет таких элементов на странице, даже если сегодня он один. Вот есть у вас #popup. Завтра заказчик просит добавить всплывающую форму и вы быстренько вставляете еще один #popup... Это заканчивается неявными проблемами.
Если бы браузер увидев дублирование id "падал" бы отказываясь отображать страницу и выбрасывал бы исключение, таких бы проблем не возникало. Но разрабы браузеров стараются отобразить страницу любой ценой - игнорировать дубли id, закрывать не закрытые теги и т.п.
Это делает подобные ошибки неуловимыми и разработчики вынуждены писать код который бы свел к минимуму саму возможность их появления.
Весь веб это пример индустрии говнокода, и отнюдь не потому, что нет хороших разрабов. Их вполне достаточно. Но сама идеология веба такова, что заставляет создавать говнорешения.
Нет стандартов, а те что есть не соблюдаются. Код решений находится в состоянии перманентной разработки и рефакторинга прямо в продакшене. Разработчики в проектах часто меняют друг-друга. И при все при этом требования к функционированию и отказаоустойчивости очень жесткие - ошибка приводит к проблемам сразу на многих машинах многих пользователей.
Результат этого ровно то, что мы имеем.