Jump to content
  • 0

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


SLaVeRS9
 Share

Question

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

"CSS

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

 

Edited by SLaVeRS9
Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

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

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

  • 0

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

Макфарланд - Большая книга 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/

Link to comment
Share on other sites

  • 0

 

Объясните пожалуйста, нигде найти не могу найти толкового объяснения. А именно: почему параметры основных блоков, таких как 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 by xzarxzes
Link to comment
Share on other sites

  • 0

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

Ну бред же написан...
Link to comment
Share on other sites

  • 0

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

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

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

ИМХО

 

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

Edited by Switch74
Link to comment
Share on other sites

  • 0

 

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

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

 

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

Link to comment
Share on other sites

  • 0

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

 

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

 

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy