Структура кода

[paracelso]

Накапливаются вопросы, и, пусть не все сразу, но частичто буду их сюда выкладывать на обсуждение или точный ответ.

Для начала, вопрос такой:

При "многоуровневой" верстке чему стоит отдать предпочтения: индивидуальному классу у каждого элемента*, вложенности элементов в ксс-коде**, нескольким классам у одного элемента***, или id-шникам**** (если элемент не интересен серверу и одинок на страчке).

Что бы выбрали Вы и почему?

Пример для тех, кто не совсем понимает, о чем речь.

Пример такой: блок в блоке, в каждом блоке по слову текста. Во внешнем блоке текст - жирный, во внутреннем - жирный курсив.

---

* - <div class="wrap1">Жирный<div class="wrap2">Жирный курсив</div></div>

.wrap1 {font-weight:bold}

.wrap2 {font-weight:bold; font-style:italic} //Да, bold указывать необязательно, но это лишь пример.

---

** - <div class="wrap">Жирный<div>Жирный курсив</div></div>

.wrap {font-weight:bold}

div.wrap div {font-weight:bold; font-style:italic} //При необходимости возможен вариант с div.wrap > div

---

*** - <div class="ibold">Жирный<div class="ibold icurs">Жирный курсив</div></div>

.ibold {font-weight:bold}

.icurs {font-style:italic}

---

**** - <div id="wrap1">Жирный<div id="wrap2">Жирный курсив</div></div>

div#wrap1 {font-weight:bold}

div#wrap2 {font-weight:bold; font-style:italic}

Пример нельзя признать полностью корректным, но суть вопроса он полностью отображает.

[zSpx]

id использую только там, где будут скрипты. Чем сложнее верстка и объемнее css, тем меньше селекторов по типу использую и больше по классу. Дочерние и сестринские селекторы использую редко (если верстка простая только), опять упор на классы. Мультиклассы там, где они нужны.

[paracelso]

Кроме поля id есть какие-нибудь рабочие способы менять элемент через js?

Суть в другом.

Какой из представленных вариантов наиболее кошерен с точки зрения валидности и разметки?

Edited October 17, 2011 by paracelso

[zSpx]

Кроме поля id есть какие-нибудь рабочие способы менять элемент через js?

Есть, но так быстрее и кроссбраузернее.

Какой из представленных вариантов наиболее кошерен с точки зрения валидности и разметки?

Никакой. Если нужно просто выделить часть текста есть реанимированные тэги <b> и <i>. При необходимости, можно им класс задать. Я бы так делал.

[paracelso]

Тут не при чем i и b, вопрос скорее в DOM-структуре и "втекающих" в неё аттрибутах. Что, с точки зрения теории и валидности, правильнее делать - вложения, мультиклассы или индивидуальные классы под каждый элемент? Id в хэдере были упомянуты лишь для полной коллекции.

Можно перефразировать вопрос следующим образом: следует ли плодить классы, или этого надо избегать, прибегая к аспекту вложенности?

[zSpx]

следует ли плодить классы, или этого надо избегать, прибегая к аспекту вложенности?

Истина, как всегда, где-то посередине. Взять какой-нибудь сферический крупный постоянно развивающийся портал, в условиях, когда неизвестно что и куда завтра добавится или что выпилится, надеяться на сохранность структуры документа не стоит. Верстка тут должна быть модульной, пуленепробиваемой, а этого без использования мультиклассов имхо не добиться. Ну а для верстки статичной промо странички можно вообще без классов обойтись) Можете про БЭМ яндекса посмотреть тут и тут.

[paracelso]

спасибо)

[SelenIT]

Какой из представленных вариантов наиболее кошерен с точки зрения валидности и разметки?

С точки зрения валидности — полностью едино. Валидности пофиг на смысл, ей важно формальное соблюдение правил вложенности (для разметки) и отсутствие незнакомых слов (для стилей, хотя там само понятие "валидности" весьма произвольно). Запись <td id="div1" class="left green content bbb" style="color:red; text-align: right"> вполне себе валидна, хотя нарушает кучу "правил хорошего тона".

А так, имхо, CSS на то и C, чтобы накладывать по каскаду всё, что нужно, от всего, что можно. Т.е. мультиклассы — самое прямое использование мощи CSS. Само собой, имена классов должны быть "говорящими", крайне желательно — чтобы они отражали суть элемента, а не только особенности оформления (хотя это вопрос дискуссионный, в пользу презентационных имен классов тоже есть разумные доводы, главное — не доводить их до абсурда а-ля пример из предыдущего абзаца.

[paracelso]

Какой из представленных вариантов наиболее кошерен с точки зрения валидности и разметки?

С точки зрения валидности — полностью едино. Валидности пофиг на смысл, ей важно формальное соблюдение правил вложенности (для разметки) и отсутствие незнакомых слов (для стилей, хотя там само понятие "валидности" весьма произвольно). Запись <td id="div1" class="left green content bbb" style="color:red; text-align: right"> вполне себе валидна, хотя нарушает кучу "правил хорошего тона".

А так, имхо, CSS на то и C, чтобы накладывать по каскаду всё, что нужно, от всего, что можно. Т.е. мультиклассы — самое прямое использование мощи CSS. Само собой, имена классов должны быть "говорящими", крайне желательно — чтобы они отражали суть элемента, а не только особенности оформления (хотя это вопрос дискуссионный, в пользу презентационных имен классов тоже есть разумные доводы, главное — не доводить их до абсурда а-ля пример из предыдущего абзаца.

Огромное спасибо, это то самое, что я так хотел услышать. Выбирая между мультиклассами и вложенностью, что бы Вы выбрали?

[SelenIT]

Общее правило, что чем глубже вложенность селекторов, тем они ресурсоемче. Но доводить его до абсурда и придумывать уникальные классы для всего, имхо, без особой нужды не стоит. Как по мне, двухуровневая вложенность ("где, что") для основной массы элементов и трех-четырехуровневая ("где, что, какое, когда") для пары-тройки-десятка особых мест — вполне разумный компромисс.

[CrazyOne]

Общее правило, что чем глубже вложенность селекторов, тем они ресурсоемче. Поэтому Но доводить его до абсурда и придумывать уникальные классы для всего, имхо, без особой нужды не стоит. Как по мне, двухуровневая вложенность ("где, что") для основной массы элементов и трех-четырехуровневая ("где, что, какое, когда") для пары-тройки-десятка особых мест — вполне разумный компромисс.

Поддерживаю

Edited October 17, 2011 by CrazyOne

[paracelso]

Кстати, уже читал подобную статью насчет отклика элемента по полям, но только не задумывался вот над чем: если id столь выигрышен (а он и правда сильно выигрышен) в сравнении с классом, оправдано ли единичные несерверные элементы через id верстать? Ваше мнение.

[zSpx]

...если id столь выигрышен (а он и правда сильно выигрышен) в сравнении с классом...

Цитата из статьи:

Конечно, селекторы по ID — самые быстрые. Проверить применимость селектора #content к рассматриваемому элементу можно очень быстро. Есть у него этот ID или нет? Селекторы по классу практически такие же быстрые, так как нет никаких связанных элементов, которые надо проверять.

[Searcher]

...единичные несерверные элементы ...

Не понял, что вы имели ввиду?

[paracelso]

Имел ввиду элементы, не задействованные на уровне сервера, и встречающиеся один раз.

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

Фраза довольно общая, и хоть, я и привык аргументировать свои слова, в данном случае могу сказать лишь, что при обращении к DOM-структуре использование id значительно уменьшает время исполнения скрипта. А вот источник и пруфлинки дать не смогу.

Отсюда, собственно, и мой интерес к использованию id в подходящих для этого местах.

Цель всей темы - в теории понять, какой код будет считаться наиболее оптимальным и правильным.

[zSpx]

Нативный getElementsByClassName работает максимально быстро, да и причем тут это? Верстка с избыточным количеством id сильно теряет в гибкости. Вы не сможете скопировать какой-нибудь элемент, Вам придется давать новый id и определять его в css. Если хотите сравнить, создайте 2 странички с нереально большим количеством элементов. Одна с классами, другая с id и посмотрите, какая будет разница в скорости отрисовки. Потом подумайте, стоит ли игра свеч.

Имел ввиду элементы, не задействованные на уровне сервера, и встречающиеся один раз.

Что это значит?

Edited October 18, 2011 by zSpx

[Searcher]

Цель всей темы - в теории понять, какой код будет считаться наиболее оптимальным и правильным.

Вы ждете общего правила? Его нет. Все зависит от конкретной ситуации.

Ну и "элементы, не задействованные на уровне сервера" - совсем не понятно. Уже стало любопытно, что же это такое...

[SelenIT]

Телепательная машинка подсказывает, что "элементы, задействованные на уровне сервера" — это что-то вроде <form runat="server"> из ASP.NET (таким штукам, как правило, ID-шки раздает сам фреймворк, порой абсолютно непроизносимые). А "не задействованные..." — соотв-но, все остальные.

[paracelso]

Телепательная машинка угадала.

[Nanto]

я обычно прохожку по цепочке контекстных селекторов (иногда по 5-6 элементов) до тех пор пока она не станет уникальной... Но это обусловлено спецификой работы - здоровенные сквозные шаблоны в которых БЫСТРО надо изменить стиль. Простонет времени (а порой и возможности) копаться в php-структурах для того, чтобы навесить нужный класс. Вот и приходится лепить "цепочки". Но, имхо (уже поднимал тут подобную тему) это ещё получается и вполне семантично - по подобной цепочке легко видна структура кода (вложенность селекторов)... Т.е. не залезая в html-файл я уже вижу кто родитель, а кто потомок. Если же мне встретится в css класс "cursive_bold", придётся копаться в html-файле (или файербаге каком-нибудь) чтобы отслдеить - на что же навешен этот класс.

Опять таки классом удобно менять стиль у группы элементов одновременно. А если нужно поменять только одному элементу? Переназначать ему класс? В небольших шаблонах оправдано - в больших чёрт ногу сломит! Проще перечислять контекстные селекторы через запятую...

ID - нужен для JS (а заранее редко когда знаешь понадобиться он потом или нет). Ну и часто возможные косяки с наличием нескольких элементов с одним ID. В принципе идентификаторов стараюсь избегать (но не принципиально)... Но если знаю что вот этот элемент абсолютно точно уникален (например, форма на конкретной странице) - скорее всего повешу ID (да и форме скорее всего понадобиться js)...

В целом я бы выбрал форму записи:

.layer1 p span{...}

. Но только не

div.layer1 div

- вложенные одноименные элементы-контейнеры имеют свойство плодиться и такая запись зачастую некорректно срабатывает... А вот

div .layer1

другое дело...

[paracelso]

вложенные одноименные элементы-контейнеры имеют свойство плодиться и такая запись зачастую некорректно срабатывает... А вот

div.layer1 > div разве проблему не решает?) Там же выше разобрано

[Nanto]

IE6 дочерних селекторов не понимает - это раз.

А во-вторых, сегодня у Вас этот div первый потомок, а завтра Вам понадобиться перед ним влепить ещё один блок...