Разница между ID и CLASS
Id и class это "крючки"
Мы можем различными путями описать содержимое HTML/XHTML документа. Основные элементы такие, как <h1>, <p> and <ul> выполняют свою работу, но основной набор тегов не может покрыть каждый возможное оформление страничного элемента или слоя. Для этого нам нужно ID и сlasses. Для примера <ul id=”nav”>, это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью по сравнению с другими маркированными списками на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов: <div id=”footer”>. Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом: <div class=”sidebar-box”>.
И какова все таки разница между ними?
ID уникальны
- Каждый элемент может иметь только один ID
- На каждой странице может быть только один элемент с ID
Ваш код страницы не пройдет валидацию, если вы иcпользуете одинаковые ID для более одного элемента. Так как валидность для нас очень важна, не стоит забывать об уникалность идентификаторов ID.
Class-ы не уникальны
- Вы можете использовать одинаковые классы для разных элементов
- Вы можете использовать разные классы для одинаковых элементов
Любая информация, необходимая для наложения на разные объекты может быть описана в class. Для примера страница с множественными “widgets”:
<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>
Вы можете использовать имя class-а “widget” как "крючок", чтобы, например, сделать больше, чем другие, но при этом сохраняя все аттрибуты. Вы можете накладывать на один объект более чем один класс.
<div class="widget"</div>
<div class="widget big"></div>
<div class="widget"></div>
Нет необходимости использовать новый класс, просто добавьте новый class справа. Эти class разделенные через пробел нормально воспринимаются всеми браузерами в любом количестве (но не стоит доходить до фанатизма и создавать тысячу и более классов для одного элемента).
ID имеют специальную функциональность для браузера
Class не имеет специального значения в браузерах, в отличии от ID. ID имеют очень важное свойство, так называемое "мера упорядочности (hash value)". Например если вы введете в строке браузера строку http://your_site.ru#comments, то браузер попытается найти элемент с Id = "comments" и автоматически совершит скроллинг страницы, чтобы показать этот элемент.
Это и является основой причиной уникальности ID, поэтому ваши барузеры знают куда скроллить.
Если не нужны, то и не испольуйте
Как вы уже заметили, class-ы и ID очень важны, и поэтому нам необходимо использовать их каждый день, для того чтобы манипулировать со страницей. Поэтому мы должны их использовать разумно и семантично.
Это подразумевает следующее:
<a href="http://palpalych.ru" id="link">CSS от ПаЛыЧа</a>
Мы уже знаем что этот элемент является ссылкой, но он еще якорный элемент. Нет смысла накладывать на него class, так мы уже наложили стиль через его тег.
Также стоит избегать следующих конструкций:
<div id="right-col">
ID подразумевает использование здест только одну правую колонку, но имя здесь неподходящее. Пытайтесь и описывайте содержимое элемента, но только не где он находится или на что он похож. ID “sidebar” будет более подходящим.
Ну Вот, в принципе и все.
Комментарии
Извини конечно,но русский язык не является сильной моей стороной. Ответить
Иллюстрация:
несмотря на стили class, все браузеры проигнорируют свойства у class в пользу этих же свойств у id
#id{
font-size:2em;
color:#FFO
}
.class{
font-size:1em;
color:#FOF
} Ответить
Причем, забыл добавить, по приоритетности id настолько силен, что его не сможет переломить и дюжина классов. Только inline стиль. Ответить
Усли у меня id="navigation", то id="sidebar" нельзя на той же странице? Ответить
Для атрибута id существует функция .getElementById(). Ответить
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
Содержание блока
При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
.test.test2 { font-size: 14px; }
Для id – будет так:
#test, #test2 { font-size: 14px; } Ответить
Для документа со 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 только в случае действительной необходимости. Ответить