Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

Разница между «ID» и «CLASS»

Индентификаторы (id) и классы (class) – это «крючки»

Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как <h1>, <p> и <ul> выполняют свою работу, но основной набор тегов не может покрыть каждое возможное оформление страничного элемента или слоя. Для этого нам нужно использовать идентификаторы и классы. Для примера <ul id="nav">, это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью отдельно от других маркированных списков на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов: <div id="footer">. Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом: <div class="sidebar-box">.

И какова все-таки разница между ними?

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

  • Каждый элемент может иметь только один ID.
  • На каждой странице может быть только один элемент с ID.

Ваш код страницы не пройдет валидацию, если вы иcпользуете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.

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

  • Вы можете использовать одинаковые классы для разных элементов.
  • Вы можете использовать разные классы для одинаковых элементов.

Любая информация, необходимая для наложения стилей на разные объекты, может быть описана в class. Для примера – страница с множественными “widget”:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div> 

Вы можете использовать имя класса “widget” как крючок, чтобы, например, сделать больше, чем другие, но при этом сохраняя все атрибуты. Вы можете накладывать на один объект более, чем один класс:

<div class="widget"</div>
<div class="widget big"></div>
<div class="widget"></div> 

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

Идентификаторы имеют специальную функциональность для браузера

Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку http://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.

Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.

При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.

Если не нужны, то и не испольуйте

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

Это подразумевает следующее:

<a href="http://palpalych.ru" id="link">CSS от ПаЛыЧа</a>

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

#link{}

Идентификатор подразумевает использование здесь только одной правой колонки, но имя здесь неподходящее. Пытайтесь описывать содержимое элемента, но только не то, где он находится или то, на что он похож. Идентификатор “sidebar”  будет более подходящим.

<div id="sidebar"> 

Ну вот, в принципе и все.

Комментарии

#Alix02.09.2008 10:38
тема у статьи хорошая. А сама статья... такое ощущение что писал бухой. Куча ошибок и нелогичные объяснения. Ответить
#PaLyCH27.03.2016 16:49
Извини конечно,но русский язык не является сильной моей стороной Ответить
#Newone25.12.2008 22:01
Есть еще одно очень важное различие. У id в плане css приоритет гораздо больше чем у class.

Иллюстрация:
несмотря на стили class, все браузеры проигнорируют свойства у class в пользу этих же свойств у id

#id{
font-size:2em;
color:#FFO
}

.class{
font-size:1em;
color:#FOF
} Ответить
#Newone25.12.2008 22:04
В верхнем комменте вырезался тег. Хотя может и понятно, но для наглядности создайте тег с id="id" и class="class".
Причем, забыл добавить, по приоритетности id настолько силен, что его не сможет переломить и дюжина классов. Только inline стиль. Ответить
#PaLyCH26.12.2008 01:10
Именно так. Ответить
#Marina10.11.2009 10:14
•На каждой странице может быть только один элемент с ID
Усли у меня id="navigation", то id="sidebar" нельзя на той же странице? Ответить
#PaLyCH10.11.2009 11:32
Суть в том что был идентификаторы не повторялись. Можно хоть мулльон, но чтобы были разными Ответить
#PetrosTur06.09.2010 10:45
Дополнительные функции id.

Для атрибута id существует функция .getElementById(). Ответить
#PetrosTur06.09.2010 10:47
Запись множественных атрибутов.

Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

Содержание блока

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

.test.test2 { font-size: 14px; }

Для id – будет так:

#test, #test2 { font-size: 14px; } Ответить
#PetrosTur06.09.2010 11:08
При прочих равных условиях, создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).

Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName(‘*’).length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.

Однако, значительную нагрузку составляет именно создание DOM-дерева в документе (можно посмотреть, как экспоненциально растет время для Opera, Firefox и Safari) и самого документа (постоянное время в 60мс для IE, которое превосходит все остальные накладные расходы при создании среднего документа). В целом, эти операции уходит от 70% всего времени (т.е. наибольшая экономия достигается за счет минимизации размера дерева и количество HTML-страниц, загружаемых, например, во фрейме, в этой области планируется провести дополнительные исследования).

На скорость вычисления одного элемента по идентификатору, как ни странно, наибольшее влияние оказывает опять-таки DOM-Дерево, чем количество таких элементов. Даже при 1000 элементов с id более половины временных издержек можно урезать, если просто сократить общее число элементов (особенно хорошо это заметно для IE).

В целом же, основных советов два: уменьшайте DOM-дерево и используйте id только в случае действительной необходимости. Ответить

Добавить комментарий

Наверх