Класс Div против id

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

Идентификаторы должны быть уникальными. КЛАССЫ должны быть общими. Итак, если у вас есть форматирование CSS, которое будет применяться к нескольким DIV, используйте класс. Если только один (как требование, а не случайность), используйте идентификатор.

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

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

<div id = "section" class = "section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

Текст будет белым.

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

<div class = "code-formatting-style-name" id = "myfirstDivForCode">
</div>

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

Используйте id для идентификации элементов, которые будут только одним экземпляром на странице. Например, если у вас есть одна панель навигации, которую вы размещаете в определенном месте, используйте id = "navigation".

Используйте class для группировки элементов, которые ведут себя определенным образом. Например, если вы хотите, чтобы название вашей компании выделялось жирным шрифтом в основном тексте, вы можете использовать <span class='company'>.

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

Итак, действительно, если есть только один элемент в документе, который будет использовать стиль (например, #title), тогда используйте я бы. Если несколько элементов могут использовать стиль, используйте учебный класс.

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

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

Самое важное, что нужно понимать, - это то, что идентификаторы должны быть уникальными: на странице должен существовать только один элемент с данным идентификатором. Таким образом, если вы хотите обратиться к определенному элементу страницы, это часто лучше всего использовать.

Если у вас есть несколько элементов, которые в чем-то похожи, вы должны использовать класс elements для их идентификации.

Один очень полезный, на удивление малоизвестный факт заключается в том, что вы можете фактически применить несколько классов к одному элементу, поместив пробелы между именами классов. Таким образом, если вы разместили вопрос, который был написан текущим авторизованным пользователем, вы можете идентифицировать его с помощью <div class = "question currentAuthor">.

Сам стандарт HTML отвечает на ваш вопрос:

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

Поэтому, если вы хотите применить определенные атрибуты стиля CSS только к одному DIV, это будет идентификатор. Если вы хотите, чтобы определенные атрибуты стиля применялись к нескольким DIV, это должен быть класс.

Обратите внимание, что вы можете смешивать и то, и другое. Вы можете сделать два DIV принадлежащими одному классу, но дать им разные идентификаторы. Затем вы можете применить стиль, общий для класса, и вещи, относящиеся к любому из них, к их идентификатору. Браузер сначала применит стиль класса, а затем стиль идентификатора, поэтому стили идентификатора могут перезаписать все, что класс установил ранее.

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

Другое дело, что для классов вы можете использовать несколько значений (помещая пробелы между каждым классом, a la "class = 'blagh blah22 blah'), тогда как с идентификаторами вы можете использовать только идентификатор для каждого элемента.

Стили, определенные для идентификаторов, переопределяют стили, определенные для классов, поэтому в настройках стиля #uniquething будет отменен стиль .whatever, если они конфликтуют.

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

Я предпочитаю использовать идентификацию класса, когда стили css применяются к нескольким div одинаково. Если структура или контейнер действительно применяется только один раз или может унаследовать свой стиль от стиля по умолчанию, я не вижу причин использовать идентификацию класса.

Так что это будет зависеть от того, является ли ваш div одним из нескольких; например, div, представляющий вопрос к ответу на веб-сайте stackoverflow. Здесь вы хотите определить стиль для класса «Ответ» и применить его к каждому div «Ответ».

Если вы используете веб-элементы управления .Net, то иногда намного проще просто использовать классы, поскольку .Net изменяет идентификаторы div веб-элемента управления во время выполнения (где они используют runat = "server").

Использование классов позволяет легко создавать стили с отдельными классами для шрифтов, интервалов, границ и т. д. Я обычно использую несколько файлов для хранения отдельных типов информации о форматировании, например basic_styles.css для простого форматирования всего сайта, ie6_styles.css для определенных стилей браузера (в данном случае IE6) и т.д. и template_1.css для информации о макете.

Какой бы способ вы ни выбрали, старайтесь быть последовательным, чтобы помочь в обслуживании.

Кроме того, элементом, которому вы даете определенный идентификатор, можно управлять с помощью команд JavaScript и DOM - например, GetElementById.

В общем, я считаю полезным присвоить всем основным структурным div идентификаторы - даже если изначально у меня нет каких-либо конкретных правил CSS для применения, у меня есть такая возможность на будущее. С другой стороны, я использую классы для тех элементов, которые можно использовать несколько раз - например, div, содержащий изображение и заголовок - у меня может быть несколько классов, каждый с немного разными значениями стиля.

Помните, однако, что при прочих равных, правила стиля в спецификации идентификатора имеют приоритет над правилами стиля в спецификации класса.

Еще о некоторых вещах, о которых следует помнить:

• При использовании ASP.Net у вас нет полного контроля над идентификатором элементов, поэтому вам в значительной степени придется использовать класс (обратите внимание, что это менее верно, чем когда-то было).

• Лучше использовать ни один, когда вы можете помочь. Вместо этого укажите тип элемента и тип родителей. Например, неупорядоченный список, содержащийся внутри div с классом navarea, можно выделить следующим образом:

  div.NavArea ul { /* styles go here */ }
  

Теперь вы можете стилизовать логическое деление для большей части всей вашей навигационной области с помощью одного приложения класса.

В дополнение к тому, что идентификаторы и классы отлично подходят для настройки стиля отдельного элемента и аналогичного набора элементов, есть еще одно предостережение, о котором следует помнить. Это также в некоторой степени зависит от языка. В ASP.Net вы можете добавить Div и иметь идентификаторы. Но если вы используете Panel вместо Div, вы потеряете идентификатор.

Дополнительным преимуществом использования идентификатора является возможность указать его в теге привязки:

<h2 id = "CurrentSale">Product I'm selling</h2>

Позволит вам в другом месте разместить ссылку прямо на это место на странице:

<a href = "#CurrentSale">the Current Sale</a>

Обычно это используется для присвоения каждому заголовку в блоге идентификатора с отметкой даты (скажем, id = "date20080408"), что позволит вам настроить таргетинг на этот раздел страницы блога.

Также важно помнить, что существуют более строгие правила именования идентификаторов, в первую очередь то, что они не могут начинаться с числа. См. Аналогичный вопрос SO: Какое допустимое значение для атрибутов id в html

Я думаю, что все мы знаем, что такое класс, но если вы думаете об идентификаторах как об идентификаторах, а не о инструментах стилизации, вы не ошибетесь. Вам нужен идентификатор, когда вы пытаетесь нацелить что-то, и если у вас есть более одного элемента с одним и тем же идентификатором, вы больше не можете его идентифицировать ...

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

Подумайте об университете.

<student id = "JonathanSampson" class = "Biology" />
<student id = "MarySmith" class = "Biology" />

Студенческие карточки Я БЫ отличаются друг от друга. У двух студентов в кампусе не будет одинаковых студенческих карточек Я БЫ. Однако многие студенты могут и будут делиться хотя бы одним Учебный класс друг с другом.

Допустимо помещать нескольких студентов под одним заголовком Учебный класс, Биология 101. Но никогда не приемлемо помещать нескольких студентов под одного студента Я БЫ.

При передаче Правила по школьной системе внутренней связи вы можете передать ПравилаУчебный класс:

"Would the Biology class please wear Red Shirts tomorrow?"

.BiologyClass {
  shirt-color:red;
}

Или вы можете дать правила конкретному ученику, вызвав его уникальный Я БЫ:

"Would Jonathan Sampson please wear a Green Shirt tomorrow?"

#JonathanSampson {
  shirt-color:green;
}

Где использовать ID по сравнению с классом

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

Идентификаторы - невероятно мощный инструмент. Элемент с идентификатором может быть целью фрагмента JavaScript, который каким-то образом манипулирует элементом или его содержимым. Атрибут ID можно использовать в качестве цели внутренней ссылки, заменяя теги привязки атрибутами имени. Наконец, если вы сделаете свои идентификаторы ясными и логичными, они могут служить своего рода «самостоятельной документацией» в документе. Например, вам не обязательно добавлять комментарий перед блоком, в котором говорится, что блок кода будет содержать основное содержимое, если открывающий тег блока имеет идентификатор, скажем, «основной», «заголовок», «нижний колонтитул». ", так далее.

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

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

Бывший :

<div id = "post-289" class = "box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}