класс div против id

Question

При использовании div когда лучше всего использовать класс против id?

Лучше ли использовать класс, скажем, вариант шрифта или элементы в HTML? Тогда используйте id для структуры / контейнеров?

Это то, о чем я всегда был немного неуверен, любая помощь была бы великолепна.

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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