Чем отличаются классы от идентификаторов

Чем отличаются классы от идентификаторов

На первый взгляд нет никакой разницы что использовать: id или class. Ведь присвоив одинаковые параметры CSS стилей для id и class — результат будет идентичен. На самом деле, отличий между id и class в CSS практичесски нет, за исключением приоритета их обработки. Но в некоторых других случаях, которые весьма часто используются в web-разработке, разница весьма ощутима. Эта статья как раз и выделяет все отличия class и id.

Id — это уникальный идентификатор элемента. На одной странице один идентификатор применяется только единожды, хотя можно применять и несколько одинаковых идентификаторов в пределах одной страницы, но это может вызвать проблемы при использовании HTML-якорей и JS. Если попытаться присвоить одному элементу (HTML-тегу) два различных ID, то сработает только правила из первого (самого левого) ID

В случае одновременного применения к одному элементу id и class, приоритет у ID будет выше, чем у class:

Этому абзацу присвоены класс my_class и идентификатор my_id.

Как видно, цвет приобрел значения, записанные в идентификаторе. Но если присмотрется внимательнее, то id и class могут с успехом дополнять друг-друга: жирный шрифт, заданный в идентификаторе сочетается с курсивным начертанием, записанным в class.

Если же дописать дескриптору p > еще и стиль: p class = "my_class_r7t" style = "color: grey" id = "my_id_r7t" > , то результат будет таким:

Самым высоким приоритетом обладает стиль, присвоенный дискриптору с помощью style=". ".

Хороший пример приоритетов, приведен в официальной документации по CSS (eng) . В кратце, приоритеты в порядке убывания таковы: style, id, class, стиль тега.

Элемент id может быть применён в качестве HTML-якоря, вместо более древней конструкции a name = "imya_jakorya" > / a > , для того, чтобы можно было сослаться на определенную часть страницы, без ее перезагрузки с попомщью a href = "#imya_jakorya" > Наверх / a > . Если на странице окажется несколько идентичных id, возникнет неоднозначная ситуация.

При программировании страниц с помощью JS, зачастую используется функция getElementById ( ) , которая также "рассчитывает" на то, что идентификатор должен быть уникальным. В противном случае могут возникнуть ошибки в коде.

Class

При использовании class, одному HTML-дескриптору можно назначить стили из нескольких классов одновременно:

Имена различных классов записываются через пробел:

Как это выглядит, смотрите ниже:

Результат применения двух различных классов для 1-го дескриптора HTML.

Классы my_class_r7t и my_class_ffR5 устанавливают различные цвета содержимому HTML-тега. Использован будет тот цвет, который определен в файле стилей позже (в данном случае class my_class_ffR5 записан после my_class_r7t). Порядок применения классов в самом HTML-дескрипторе значения не имеет.

Чтобы назначить составным классам уникальное стилевое оформление, они записываются вместе, без проблеов:

Выравнивание по правому краю, будет применено только в случае, когда одному HTML-дескриптору присвоено сразу 2 класса:

= "my_class_ffR5 my_class_bbbb755" > Пример применения стилей для составных классов

Читайте также:  Почему эксель не суммирует числа в ячейках

Как это выглядит, смотрите ниже:

Пример применения стилей для составных классов

Один и тот же class, в отличае от id, можно без проблем присваивать не ограниченному кол-ву различных элементов:

Class или id — что использовать?

На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.

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

Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как

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

Для примера , это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью отдельно от других маркированных списков на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов:

Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом:

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

Идентификаторы всегда уникальны для одной страницы

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

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

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

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

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

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

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

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

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

Читайте также:  Как сохранить фото с авито на телефон

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

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

Элемент может содержать оба свойства

Ничто не мешает вам иметь и идентификатор, и класс на одном элементе. На самом деле, это часто очень хорошая идея. Возьмем, к примеру, разметку по умолчанию для элемента списка комментариев:

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

CSS все равно

Что касается CSS, вы ничего не можете сделать с идентификатором, такого что вы не можете сделать с классом, и наоборот. Я помню, когда я впервые изучал CSS, и у меня возникла проблема, иногда я пытался устранить неполадки, переключаясь между этими значениями. Нету. CSS не волнует.

Но помним, что вес селектора CSS с идентфиикатором, больше селектора класса.

Javascript

Люди из JavaScript уже, вероятно, более созвучны различиям между классами и идентификаторами. JavaScript зависит от наличия только одного элемента страницы с любым конкретным идентификатором, иначе обычно используемая функция getElementById не будет надежной. Для тех, кто знаком с jQuery, вы знаете, как легко добавлять и удалять классы для элементов страницы. Это встроенная функция jQuery.

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

И да, Javascript значительно быстрее найдет элемент с идентификатором, чем элемент с классом.

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

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

Это значит избегать таких вещей:

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

Также избегайте этого:

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

Микроформаты требуют специфические названия классов

Думаешь, микроформаты у тебя не укладываются у тебя в голове? Это не так, всё просто! Это просто обычная разметка, использующая стандартизированные имена классов для информации, которую они содержат. Пример стандартной vCard:

Читайте также:  Преобразовать секунды в дату

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

При прочих равных условиях, создание документа с 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 только в случае действительной необходимости.

Запись множественных атрибутов.

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

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

Собственно использую как id так и class в div.
Но вижу разницу лишь в CSS, а именно в # и . перед названием.
Знаю еще, что id главнее чем class и сперва обрабатывается он.

Если я вообще не буду использовать id, не помешает ли это?
А если я не буду использовать только class?
Или использовать все вместе выгодно?

  • Вопрос задан более трёх лет назад
  • 3397 просмотров

class будет указывать на группу элементов:
div.title — все элементы дивы класса title (. ).
.title — все элементы класса title (. )

id — идентификатор какого-либо конкретного элемента HTML (должен быть уникальным).
#title — один конкретный элемент с (. ).

Ссылка на основную публикацию
Часы с функцией диктофона
Классические часы с секундной стрелкой; Цифровые часы (поддержка 12/24ч форматов, для смены формата сделайте двойной тап по цифрам); Диктофон (поддержка...
Формула vlookup на русском
Функция ВПР в Excel позволяет данные из одной таблицы переставить в соответствующие ячейки второй. Ее английское наименование – VLOOKUP. Очень...
Формула в эксель вычитаем проценты
В различных видах деятельности необходимо умение считать проценты. Понимать, как они «получаются». Торговые надбавки, НДС, скидки, доходность вкладов, ценных бумаг...
Часы с которых можно звонить детские
Ребенка, который самостоятельно посещает школу или гуляет с друзьями, подстерегает много опасностей. Решить эту проблему помогут технологичные детские умные часы...
Adblock detector