Слово в защиту селекторов потомков и ID элементов.

Перевод статьи:  In Defense of Descendant Selectors and ID Elements.
Автор:  Jeffrey Zeldman.

За исключением тех случаев, когда я временами дорабатываю свою книгу "Designing With Web Standards" («Веб-дизайн по стандартам»), я уже несколько лет не пишу о прикладном, практическом применении CSS и HTML. Ниша публицистики никогда не пустует, и поэтому другие дизайнеры и разработчики уже заняли мое место. В большей своей части, это, конечно же, является хорошим признаком и имеет положительный эффект как для самих авторов, так и для нашей индустрии в целом. Лучше всего это получается у тех, кто 25 часов в сутки по шею погружен в дебри кодирования, как когда-то это происходило и со мной. В то время когда такие представители как я перемещаются на стратегические позиции и в большей степени выполняют роль наблюдателей (что предоставляет нам новые возможности для инноваций и свежие темы для своих публикаций), нынешнее поколение знатоков ремесла кодирования совершают новые открытия и делятся новыми методами обучения. Ну что ж поделаешь — магия цикличности жизни.

Но среди множества случаев добродетели, иногда можно встретить и совершенно противоположные моменты. Возьмем, к примеру, мнение, которое в последнее время трансформируется в догму, что id атрибуты (идентификаторы элементов) почти всегда использовать не рекомендуется по причине того, что они «излишне специфичны», а более предпочтительными являются имена классов. Я называю это, мягко выражаясь, просто чушью.

Насколько я знаю, эта идея принадлежит Николь Салливан, которой она поделилась в своей выдающейся статье "Object Oriented CSS" («Объектно ориентированный CSS»). В ней рассматривается подход HTML и CSS кодирования, предназначенный для внедрения на объемных сайтах, содержащих тысячи документов, создаваемых дюжинами фронт-энд разработчиков годами, и, в большинстве случаев, не предусматривающий каких-либо правил или руководств по стилизации (по крайней мере, до тех пор, пока это не станет острой необходимостью).

На подобных ресурсах (таких сайтах, как Amazon или Facebook, которые благодаря участию множества разработчиков и отсутствию должного централизованного контроля, были изначально обречены на такой исход) использование структурных селекторов потомков с применением идентификаторов элементов может быть проблематично. Особенно это касается тех случаев, когда неопытные верстальщики пытаются переопределить такие селекторы (основанные на идентификаторах селекторы потомков), создавая при этом правила, содержащие еще более специфичные селекторы потомков.

При таких исключительных (и редких) обстоятельствах, когда в результате не согласованности, разработчики добавляют правило за правилом, создавая огромный, бесформенный CSS файл, который в большей степени будет похож на археологический артефакт, чем на пример продуманного современного способа кодирования, предостережения Николь, касательно применения основанных на id селекторов потомков будут к месту. То есть, если вам не повезло, и вы работаете над огромным, скверно разработанным сайтом, в котором вам непозволительно делать рефакторинг его шаблонов и CSS кода в соответствии со здравым смыслом и лучшей практикой, то у вас останется одна надежда на имена классов, без использования селекторов потомков и идентификаторов элементов.

Но в большинстве (практически всех) других ситуациях, продуманное использование идентификаторов в комбинации с селекторами потомков является более предпочтительным с точки зрения семантики и уменьшения нагрузки на сетевое соединение.

Причина, по которой я постоянно отстаиваю использование идентификаторов — их непосредственное участие в процессе введения новых элементов HTML5 спецификации. В 2000 году мы использовали <div id="footer"> для придания содержанию этого блочного элемента структурного смысла, так как не имели отдельного элемента footer. Сегодня же, в подобных случаях, в зависимости от браузера и устройства, используемого пользователем для просмотра вашего сайта, мы имеем возможность применить новый <footer> элемент из HTML5 спецификации. (*Существует не менее авторитетное, прямо противоположное мнение на этот счет). Но в том случае, если условия не позволяют нам использовать новый элемент, то мы с успехом можем воспользоваться старым способом – применить атрибут id.

Что же касается селекторов потомков, то вполне можно допустить, что на сайте, разработанном не сотней «обезьян», элементы, находящиеся внутри новых структурных элементов HTML5 стандарта или контейнеров <div> с соответствующими значениями атрибутов id, будут корректно отображаться с учетом совместимости их стилевого оформления. А также вполне допустимо и то, что эти самые дочерние элементы могут иметь различное стилевое оформление, находясь в разных структурных разделах документа — дивах с идентификаторами или HTML5 элементах. К примеру, элементы параграфы или элементы списка, находящиеся в рамках структурного элемента <footer> могут иметь совершенно другое стилевое оформление, чем параграфы и элементы списка в пределах структурного элемента <aside>. А все элементы параграфы в <footer> будут выглядеть совершенно одинаково. Это же касается и параграфов, находящиеся внутри элемента <aside>. Ведь для этих целей и предназначены идентификаторы (или HTML5 элементы) и селекторы потомков. Назначение имени класса для каждого элемента параграфа в боковой колонке – это не только пустая трата пропускной способности сетевого соединения, но, к тому же, и признак плохого тона в кодировании.

Давайте еще раз повторимся: нет ничего плохого в идентификаторах, использующихся надлежащим образом (семантически, структурно и умеренно). Гораздо более ошибочным можно считать мнение, что применение имен классов предпочтительнее селекторам потомков и семантическим значениям идентификаторов, соответствующим структуре документа.

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

Сегодня я буду принимать участие в обсуждении кодирования и других различных вопросов, касательно Веба с Крисом Койером и Дэйвом Рупертом на Shoptalk подкасте (*21 ноября 2012 г). Кстати, сообщите ваше мнение по этому поводу. И не забудьте, что 30 ноября – шестая годовщина празднования дня голубой шапочки в поддержку веб-стандартов. Где бы вы не находились в период великих дебатов по поводу id, прошу вас поддержите меня и тысячи других моих сторонников 30 ноября.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *