Class и Id при верстке – что же выбрать?

Многие новички учась наверное смотрят на HTML код других сайтов и часто задаются вопросами. Почему же одни сайты верстают на классах, а другие на идентификаторах. А иногда верстают используя и классы class и идентификаторы id одновременно.

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

Какая же разница между ними? Вроде никакой, ведь можно верстать при помощи любого элемента class или id.

Идентификаторы ID уникальны

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

1
2
3
4
5
6
7
8

<div id="head"> ... </div>
<div id="sidebar">
   <div class="block"></div>
   <div class="block"></div>
   <div class="block"></div>
</div>
<div id="content"> ... </div>
<div id="footer"> ... </div>

Классы CLASS не уникальны

Классы не уникальны, вы можете использовать их несколько раз по документу. Важное замечание – вы даже можете присваивать одному элементу несколько классов. Вот пример:

1
2
3
4
5
6
7
8

<div id="head"> ... </div>
<div id="sidebar">
   <div class="block floatleft bgred"></div>
   <div class="block floatright bggreen"></div>
   <div class="block bgblue"></div>
</div>
<div id="content"> ... </div>
<div id="footer"> ... </div>

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

1
2
3
4
5

<div id="sidebar floatleft">
   <div class="block bg-red floatleft"></div>
   <div class="block bg-green floatleft"></div>
   <div class="block bg-blue floatleft"></div>
</div>

А CSS свойства при таком раскладе будут такие:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#sidebar {
   width:240px;
}
.block {
   height:30px;
   font: normal 16px/30px Verdana, Arial;
   text-transform: upper-case
}
.bg-red {
   background: url("bg-red.png")
}
.bg-blue {
   background: url("bg-blue.png")
}
.bg-green {
   background: url("bg-green.png")
}
.floatleft {
   float:left;
}

В этом примере я использовал несколько интересных техник. Например, floatleft в CSS файле достаточно прописать один раз и указывать этот класс в любом месте, когда нам нужно выравнивание по левому краю. Идем далее, в блоках прописываем класс block, в котором его размеры. А теперь для того чтобы присвоить картинку в задний фон разного цвета для каждого блока я создал классы bg-red, bg-blue и bg-green. Видите как все просто и удобно?

Как вы видите лучше всего прибегать к совместному использованию этих элементов. Идентификаторы присваивать крупным объектам вроде шапки, сайдбаров, области контента, подвала сайта, блоков в сайдбаре. А классы можно использовать где угодно. Вот ниже скриншот верстки одного моего макета под шаблон DLE.

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

Удачи! Заводской раб.