Идентификатор или класс?

[SLaVeRS9]

Объясните пожалуйста, нигде найти не могу найти толкового объяснения. А именно: почему параметры основных блоков, таких как footer, main, header советуют тоже через классы задавать? почему id - это не правильно\не эстетично!?
 

"CSS

    Не использовать #id для описания стилей блока.
    Почему-то одна из самых часто встречаемых ошибок -- это использование идентификатора вместо класса, для описания силей блока. Не надо этого делать.
    Давай мы с тобой определимся раз и на всегда с двумя простыми решениями:
    .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов.
    #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение.
    Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала."

 

Edited April 10, 2014 by SLaVeRS9

[Great Rash]

почему во всех книгах учат применять идентификатор, а не класс??

Ну не во всех. Учат неправильно. Помнится в старых браузерах рендер страницы происходил быстрее, если стили были назначены на ID а не на класс, но сейчас это уже не актуально. Для всех сомневающихся в правильности отказа от идентификаторов посмотрите на CSS-мастодонтов вроде bootstrap, вы не найдёте там id.

Не я же виноват, что разработчики не предусмотрели, что их стили переопределять придётся

Это просто говорит о том, что разработчики криворукие. Но я не спорю - там где без !important не обойтись конечно надо его юзать.

[ins25]

почему во всех книгах учат применять идентификатор, а не класс?? 

Макфарланд - Большая книга CSS последнее издание. Там учат использовать классы вместо id и дано несколько ссылок с доводами против id. В курсах lynda.com тоже этому вопросу уделяют внимание, там препод сказал что id считают плохим из-за войн значимости, типа если есть айди, то его трудно перебить, тоже самое написано и у макфарланда. Хотя в линде препод использует айди все таки. id удобен для якорей, есть еще вариант установки якорей с помощью <a name="">, но валидатор пишет предупреждение The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

У Макфарланда такой пример:

<div id="article">

<p>параграф</p>

<p>другой параграф</p>

<p class="special">специальный параграф</p>

</div>

решаете сделать абзац внутри div красным:

#article p {color:red;}

затем захотелось сделать текст абзаца с классом сделать синим:

.special {color:blue;}

но придется писать #article .special {color:blue;}

возникает 2 проблемы: 

1-селектор становится длиннее; 

2-теперь синий цвет применяется только к классу .special внутри элемента с id="article"

 

если же заменить id на class:

<div class="article">

<p>параграф</p>

<p>другой параграф</p>

<p class="special">специальный параграф</p>

</div>

теперь можно задать стили:

.article p {color:red;}

p.special {color:blue;}

 

подобный пример: http://jsfiddle.net/csswizardry/gTZGq/1/

[xzarxzes]

 

Объясните пожалуйста, нигде найти не могу найти толкового объяснения. А именно: почему параметры основных блоков, таких как footer, main, header советуют тоже через классы задавать? почему id - это не правильно\не эстетично!?

 

"CSS

    Не использовать #id для описания стилей блока.

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

    Давай мы с тобой определимся раз и на всегда с двумя простыми решениями:

    .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов.

    #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение.

    Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала."

 

 

Несколько статей в защиту id:.  http://www.webdirections.org/blog/in-defense-of-the-humble-id-attribute/, http://web-standards.ru/articles/cargo-cult-css/, http://webknowledge.ru/slovo-v-zaschitu-selektorov-potomkov-i-id-elementov/

 

А это против: http://webknowledge.ru/id-atributy-i-semantika-dokumentov/

Edited April 18, 2014 by xzarxzes

[Great Rash]

Причина, по которой я постоянно отстаиваю использование идентификаторов id — их непосредственное участие в процессе введения новых элементов HTML5 спецификации.

Ну бред же написан...

[Switch74]

факт интересный конечно: чтобы обработать две буквы и значение требуется больше времени чем для четырех букв и возможных нескольких значений.

я считаю, что иногда id все же можно использовать, если он есть в чем проблема сделать для него запись в CSS и не добавлять еще один класс.

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

ИМХО

 

PS: подозреваю скорость падает из-за использования id только потому, что они учитываются js, это только предположение

Edited April 18, 2014 by Switch74

[xzarxzes]

 

Причина, по которой я постоянно отстаиваю использование идентификаторов id — их непосредственное участие в процессе введения новых элементов HTML5 спецификации.

Ну бред же написан...

 

Зельдман, вроде как перестал защищать id. 

[nerv]

id удобен для якорей

Есть разница между "удобен" и "необходим"? 

[rash]

Эх, поздно я сюда пришел

 

Есть разница между "удобен" и "необходим"? 

 

 

Разумеется есть. Но я не пойму, к чему вы это здесь упомянули?

Для якорей id удобен, явно сейчас актуальнее, чем старая техника с name, вот для якорей и используйте, а для стилей незачем.

 

Если что, я не с вами спорю, просто непонятно, к чему это тут.

 

Главным преимуществом в использовании классов для оформления вижу более удобное переопределение стилей, меньшую специфичность класса по сравнению с id. important зло, и да, если в нем возникает необходимость — значит раньше что-то пошло не так.

 

К сожалению, это иногда происходит и на средних по масштабу проектах. Где-то изначально ошибся в архитектуре организации стилей, недооценил, насколько сильно будет развиваться код, насколько он усложнится — и вот уже !important иногда выскакивают то тут то там. Иногда это бывает вызвано и подключаемыми стилями сторонних компонент, но в любом случае это намекает на проблему.

 

Не всегда код, который потребовал important'ов, можно отрефакторить (ну то есть не всегда можно это себе позволить, технически возможно всегда, конечно), и поэтому чем меньше изначально есть «скользких» мест, тем лучше будет потом. Использование id — одно из них.

 

Ну и если в проекте 3—5 типов страниц, то наверное эта проблема будет чувствоваться не так остро. Но это не значит, что следует создавать проблему сознательно.

 

Насчет клонирования — нечасто, но иногда бывает нужно. «Добро пожаловать в наш дерьмовый мир обратно», как говорил один персонаж. В реальной жизни не все складывается идеально, «как должно быть».

[SelenIT]

выиграв время в формировании страницы можно потерять в скорости загрузке и трафике.

При использовании gzip-сжатия (а оно сейчас много где поддерживается автоматом) разница от длины классов становится исчезающе малой:

В другом эксперименте я убрал все атрибуты class из 60-килобайтного HTML-файла, взятого с реального сайта (уже построенного из многих повторно используемых компонентов [а-ля БЭМ — прим. перев.]). Это уменьшило размер файла до 25 кБ. Когда же исходный и очищенный файлы были загзипованы, их размеры были 7,6 кБ и 6 кБ соответственно — разница всего 1,6 кБ. Фактическая разница в размере файлов вследствие вольного использования классов редко стоит того, чтобы на ней зацикливаться.