Xpoint
   [напомнить пароль]

ID versus CLASS

Метки: [без меток]
2005-06-22 14:21:46 [обр] 1m.dm(0/6)[досье]

Рассмотри для начала маленький пример. Допустим, у нас есть на сайте пользовательский блок.
Обзовем его просто "user block". Его разметка в XHTML:

<div id="userBlock">
    <h1>User</h1>
    <div id="content">
        <div id="username">1m.dm</div>
        <ul id="menu">
            <li><a href="/user/profile">Profile</a></li>
            <li id="logout"><a href="/user/logout">Logout</a></li>
        </ul>
    </div>
</div>

Кто внимательный, сразу бросилось, наверное, в глаза злоупотребление атрибутом id.

Не раскрою секрета если скажу что id - это идентификатор элемента, уникальный в пределах документа.

Так. Если на сайте есть (а на большинстве - обязательно есть) меню, то оно может быть размечено так:

<div id="menu">
    <h1>Site menu</h1>
    <ul>
        <li>...</li>
    </ul>
</div>

И вот у нас коллизия имен вышла. В документе уже есть 2 елемента с id="menu".

По пунктам:

  1. Зачем нам нужен идентификатор menu в userBlock?

А мы хотим применить стили к пользовательскому меню:

#user #content #menu
{
    background: #EEE;
}
  1. Почему бы не сделать в userBlock так: class="menu"?

А тут мысли: атрибут class задает класс(ы) к которым относится элемент. Эти классы используются, в общем-то, только совместно со списками стилей.

Что-же выбрать: id или class?

Идентификатор элемента может использоваться не только в селекторах CSS, а еще для многих других целей. Но никакого подобия пространства имен у id не существует.

Что делать?

Можно так:

<div id="userBlock">
    <h1>User</h1>
    <div id="userBlock.content">
        <div id="userBlock.username">1m.dm</div>
        <ul id="userBlock.menu">
            <li><a href="/user/profile">Profile</a></li>
            <li id="userBlock.menu.logout"><a href="/user/logout">Logout</a></li>
        </ul>
    </div>
</div>

Жалкое избыточное подобие namespace-ов.

Думаем дальше. Если id используется только в селекторах CSS, то можно его, в принципе, заменить на class. Там уже можно обозначить иерархию и по разному оформить множество элементов с одним и тем-же именем класса, в зависимости от положения элемента в документе.

<div id="userBlock">
    <h1>User</h1>
    <div class="content">
        <div class="username">1m.dm</div>
        <ul class="menu">
            <li><a href="/user/profile">Profile</a></li>
            <li class="logout"><a href="/user/logout">Logout</a></li>
        </ul>
    </div>
</div>

CSS:

#userBlock .content .menu
{
    background: #EEE;
}

Мысль: по логике, атрибут id используется для идентификации КОНКРЕТНОГО элемента. А class для указания отношения элемента к КЛАССУ. Но, по той-же логике, в user block может быть только одно меню. Зачем мне его выделять в КЛАСС?

Несовершенство стандартов, конечно. Но как же тогда быть?

Мнения?

спустя 13 минут [обр] Lynn «Кофеман»(0/571)[досье]
В CSS к элементам можно обращатся не только по id/class, но и просто по именам тегов. Поэтому, если у вас в userBlock'е только один список (а это скорее всего так), то к нему можно просто обратиться как к #userBlock ul и не городить огород. А если списков всё же несколько, то можно дать конкретному списку с меню id="userMenu, например.
<div id="userBlock">
    <h1>User</h1>
    <div id="username">1m.dm</div>
    <ul>
        <li><a href="/user/profile">Profile</a></li>
        <li id="logout"><a href="/user/logout">Logout</a></li>
    </ul>
</div>
...
<div id="menu">
    <h1>Site menu</h1>
    <ul>
        <li>...</li>
    </ul>
</div>
#userBlock ul {
    background: #EEE;
}
спустя 3 минуты [обр] Василий М.+(0/171)[досье]
И вот у нас коллизия имен вышла. В документе уже есть 2 елемента с id="menu".

кто Вам мешает по разному назвать эти идентификаторы?

Но, по той-же логике, в user block может быть только одно меню. Зачем мне его выделять в КЛАСС?

Выделите его по id. В чем проблема?

спустя 2 минуты [обр] Алексей Севрюков(0/1280)[досье]
Да что тут думать. Если несколько элементов у Вас используют одну и ту же CSS разметку то использовать class. Если элемент один - тогда id. И как правильно заметил Lynn «Кофеман»[досье] если вложенный таг в блок с заданным id (ну или class) один и ему нужно задать какой то специфический стиль - то проще оставить его без id и class, воспользовавшись контекстом.
спустя 6 минут [обр] 1m.dm(0/6)[досье]

Про обращение по имени элемента я, конечно-же, знаю. Но не в этом суть.
А если там не ul? А, скажем, куча span-ов?

Например,

<div id="userBlock">
    <span id="username">1m.dm</span>
    <span id="status">moderator</span>
</div>
...
<div id="footer">
    <div id="status">...</div>
</div>

Оп-па! 2 элемента с id="status".

Василий М.[досье]

Лаконичность. Как же мне его назвать? menu2? Более предпочтительный вариант что-то типа userMenu. Но все таки не совершенство.

У меня движок модульный. И каждый модуль независимо от других может выдать любой вывод с произвольными id. Хотелось бы выработать какую-то схему, соглашение если хотите, по именованию идентификаторов.

Алексей Севрюков[досье]

Я про уникальность id говорю.

Если элемент один - тогда id.

А если другой модуль тоже выводит один элемент и хочет его идентифицировать точно так-же?

Не добавлять-же к каждому id имя модуля в виде префикса...

спустя 8 минут [обр] Евгений Петров(0/1055)[досье]
Резюме - использовать селекторы.
спустя 1 минуту [обр] Василий М.+(0/171)[досье]
Лаконичность. Как же мне его назвать? menu2? Более предпочтительный вариант что-то типа userMenu. Но все таки не совершенство.

Господи! Где не совершенство? Разговор неочём.

Алексей Севрюков[досье] Вам написал:

Да что тут думать. Если несколько элементов у Вас используют одну и ту же CSS разметку то использовать class. Если элемент один - тогда id

медитируйте над этой истиной пока не дойдёт до Вас.

Не добавлять-же к каждому id имя модуля в виде префикса...

именно добавлять! Иначе будет огромная путаница.

спустя 1 минуту [обр] Алексей Севрюков(0/1280)[досье]

1m.dm[досье]

А если другой модуль тоже выводит один элемент и хочет его идентифицировать точно так-же?

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

спустя 3 минуты [обр] 1m.dm(0/6)[досье]

Алексей Севрюков[досье]
Да форматирование тут не при чем. Тут идет речь об присвоении id елементу.

P.S. Вы там быстро тут пишете, аж процесс медитации срывается :)

спустя 3 минуты [обр] Алексей Севрюков(0/1280)[досье]

1m.dm[досье] id в HTML/XHTML нужен AFAIK только для двух целей:

  1. Для указания его в CSS (форматирование). Далее можно также использовать селекторы для указания стилей для внутренних блоков.
  2. Для точной идентификации объекта через DOM.

Если Вы используете id только для идентификации объекта через DOM, то каждый модуль должен задавать свой уникальный id.

спустя 18 минут [обр] 1m.dm(0/6)[досье]
А еще он используется для:
  1. Как цель для якорной ссылки (www.example.net/doc.xhtml#id)
  2. Как имя для элементов типа OBJECT.
спустя 11 минут [обр] Алексей Севрюков(0/1280)[досье]
1m.dm[досье] Имя для элементов типа object это тоже самое. Как раз и используется для идентификации объекта через DOM. А насчет якорных ссылок - да, согласен. Честно говоря даже не знал что можно использовать id как якорь. Впрочем, в это случае он тоже должен быть уникальным.
спустя 45 минут [обр] Давид Мзареулян(9/1003)[досье]

Присоединяючь к Алексею. Id следует использовать только если данный элемент будет как-то адресоваться — либо через getElementById, либо через ссылку, либо через <label for="…">. Всё. Ни для чего больше id лучше не использовать, потому что следить за уникальностью довольно сложно.

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

спустя 29 минут [обр] 1m.dm(0/6)[досье]
Давид Мзареулян[досье]
Вот тут уже вижу смысл сказанного. И логику. Пожалуй, медитацию на этом можно завершить :)
спустя 4 минуты [обр] Евгений Петров(0/1055)[досье]

1m.dm[досье] На странице есть каркас и "мясо". Для элементов каркаса используются id (количество заранее известно и ограничено), для мяса - классы (элементы могут повторяться). Это, конечно, очень обще, но суть примерно такая. А для внутренностей в стилях - селекторы.
Что тут сложного? При чем тут "несовершенство стандартов" и в чем оно?

P.S. #content #menu в Опере просто не будет работать.

спустя 29 минут [обр] 1m.dm(0/6)[досье]
Почему не будет? хм. Первый раз слышу. Не проверял.
Powered by POEM™ Engine Copyright © 2002-2005