Когда ID становятся болью в…

С тех пор, как была написана эта статья, я понял, что полный запрет на использование ID имеет смысл. Вы сможете избежать множества потенциальных проблем, отказавшись от использования ID в CSS.

В последнее время я часто встречал публикации, которые пропагандировали отказаться от ID в CSS селекторах. Меня всегда раздражало, когда в статьях скорее приказывают, нежели объясняют суть. В подобных материалах авторы часто забывают углубиться в контекст и необходимость использования ID. Я же хочу рассказать вам, почему не стоит использовать ID и как избежать большинства ошибок.

Cелекторы по ID - прекрасны, валидны и идеальны для стилизации отдельных частей страниц. Это основы HTML/CSS. ID уникален в рамках страницы и позволяет стилизовать элемент по селектору #element.

Кроме того, что ID уникальны, селектор по ID обладает большим весом, чем селектор по классу. Следовательно, даже если мы определим #info первым, он может быть перезаписан следующими за ним селекторами, соответствующими элементу, но этого не произойдет из-за бо́льшего веса, что может сбивать с толку.

Уникальность ID

Уникальность ID на странице — один из основных аргументов против их использования. Довольно неубедительный, на мой взгляд. Смысл ID именно в том, что они уникальны. Хочешь выбрать селектором несколько элементов — используй классы. Разработчики не дураки и прекрасно это понимают, так что запрещать использование ID из-за того, что они обладают уникальным значением, мягко говоря, странно.

Кроме того, не всё на странице может дублироваться. Например, совершенно невозможно дублирование области с контентом.

Непредсказуемость

Одним из главных и, на мой взгляд, самым значимым аргументом против использования селектора по ID является то, что они обладают большим весом, чем селекторы по классу и вносят в таблицы стилей полную неразбериху перезаписывая правила в самых неожиданных местах. Попытки привести поведение к ожидаемому - могут стать для вас настоящим ночным кошмаром.

Если вы используете ID в селекторах, то их вес сложно оценить, и зачастую результат будет неожиданным. Это примерно также, как если бы вы добавили !important. Селектор с большим весом перезаписывает селекторы с меньшим. Возможно, вы не всегда этого хотите.

Лучше всего объяснить на конкретном примере.

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

Давайте, посмотрим на этот пример.

Ну, вот, у нас появилась проблема! Селектор #header a обладает большим весом, чем .tweet a, поэтому ссылка внутри виджета наследует цвет ссылок из шапки и становится нечитабельной. Напомню, что представление виджета должно быть неизменным, поэтому это плохое решение.

Мы можем решить проблему добавив #header в селектор .tweet a или, хуже того, использовать !important. Бррр…

Стоит ли говорить, что эти решения далеки от оптимальных, так как, если нам понадобится добавить виджет в #footer, тут же появится потребность добавить еще один селектор, и в результате поддержка кода превратится в сущий ад. Не слишком-то дальновидно. Вот, так селекторы по ID могут стать причиной головной боли.

Лучше добавить вместо (или вместе с) ID класс: http://jsfiddle.net/csswizardry/gTZGq/3/ Использование класса в селекторе понизит его вес и решит проблему. Отказ от использования ID означает, что вам больше не придётся бороться с вами же созданной проблемой определения веса селекторов.

Я уже упоминал, что мы можем добавить класс дополнительно к ID или вместо него. Что именно предпочтительно зависит от контекста…

Удалять ли ID полностью?

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

Думаю, вы замечали ссылки «Перейти к меню» или «Перейти к контенту». Они не будут работать без ID, так что его нужно оставить, дополнительно добавив классы, необходимые для CSS-селекторов.

Так что, как и с большинством проблем разработки, решение зависит от контекста. Вы знаете контекст своих задач лучше, чем кто либо еще, так что не стоит позволять кому-то говорить вам что делать. Если вы хотите оставить ID для поддержания целостности или создания навигации внутри страницы — это ваше дело.

Подведём итоги

Да, ID - вовсе не абсолютное зло: они валидны, и безоговорочный запрет на их использование, по меньшей мере - глупость. Чтобы получить наиболее подходящее решение проблемы, принимайте его исходя из контекста задач и вашего опыта.

Используйте ID, но помните, порой это может повлечь за собой множество проблем. Все, кто говорили вам не делать этого, не то чтобы неправы, но определённо ошибаются…

Прим. переводчика: Гэрри Робертс, впоследствии добавил замечание в самом начале этой статьи о том, что не взирая на заключение статьи, спустя какое-то время, он пришёл к выводу, что всё-таки использование ID для стилизации страниц можно исключить полностью.