Когда 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 для стилизации страниц можно исключить полностью.