Класс div против id
Когда используется div, когда лучше использовать класс против id?
Лучше ли использовать класс, скажем, вариант шрифта или элементы в HTML? Тогда используйте id для структуры / контейнеров?
Это то, о чем я всегда был немного неуверен, любая помощь была бы отличной.
22 ответа
Использование id идентифицировать элементы, которые будут только один экземпляр на странице. Например, если у вас есть отдельная панель навигации, которую вы размещаете в определенном месте, используйте id="navigation",
использование class сгруппировать элементы, которые ведут себя определенным образом. Например, если вы хотите, чтобы название вашей компании отображалось жирным шрифтом в основном тексте, вы можете использовать <span class='company'>,
Самая важная вещь для понимания - идентификаторы должны быть уникальными: на странице должен существовать только один элемент с данным идентификатором. Таким образом, если вы хотите сослаться на конкретный элемент страницы, это часто - лучший выбор.
Если у вас есть несколько схожих элементов, вы должны использовать класс elements для их идентификации.
Один очень полезный, удивительно малоизвестный факт заключается в том, что вы можете применить несколько классов к одному элементу, поместив пробелы между именами классов. Таким образом, если вы опубликовали вопрос, который был написан вошедшим в данный момент пользователем, вы можете идентифицировать его с помощью
Подумай об университете.
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
Студенческие билеты отличаются. Никакие два студента в университетском городке не будут иметь одинаковую студенческую карточку. Тем не менее, многие студенты могут и будут делить по крайней мере один класс друг с другом.
Можно назначить нескольких учеников под одним названием класса " Биология 101". Однако нельзя указывать нескольких учеников под одним идентификатором.
Предоставляя правила для школьной системы внутренней связи, вы можете давать правила классу:
"Будет ли урок биологии носить красные рубашки завтра?"
.BiologyClass {
shirt-color:red;
}
Или вы можете дать правила конкретному студенту, позвонив по его уникальному идентификатору:
"Джонатан Сэмпсон, пожалуйста, наденьте Зеленую Рубашку завтра?"
#JonathanSampson {
shirt-color:green;
}
Идентификаторы должны быть уникальными, но в CSS они также имеют приоритет при выяснении, какой из двух противоречивых инструкций следовать.
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
Текст будет белым.
Дополнительным преимуществом использования идентификатора является возможность указывать его в теге привязки:
<h2 id="CurrentSale">Product I'm selling</h2>
Позволит вам в каком-то другом месте ссылаться прямо на это место на странице:
<a href="#CurrentSale">the Current Sale</a>
Обычно для этого каждому заголовку в блоге присваивается метка с датой (скажем, id="date20080408"), которая позволит вам специально настроить таргетинг на этот раздел страницы блога.
Также важно помнить, что существуют более ограниченные правила именования для идентификаторов, в первую очередь, что они не могут начинаться с цифры. Смотрите аналогичный вопрос SO: Что является допустимым значением для атрибутов id в HTML
Классы хороши, когда вы хотите применить похожие стили ко многим различным элементам или элементам. Идентификаторы хороши, когда вы хотите обратиться к конкретному элементу для форматирования или для обновления с помощью JavaScript.
Сам стандарт HTML отвечает на ваш вопрос:
Никакие два объекта не могут иметь одинаковый идентификатор, но произвольное количество объектов может иметь один и тот же класс.
Так что если вы хотите применить определенные атрибуты стиля CSS только к одному DIV, это будет ID. Если вы хотите, чтобы определенные атрибуты стиля применялись к нескольким DIV, это должен быть класс.
Обратите внимание, что вы можете смешать оба. Вы можете сделать так, чтобы два DIV принадлежали одному и тому же классу, но дали им разные идентификаторы. Затем вы можете применить стиль, общий для обоих классов, а также специфичные для каждого из них стили для их идентификатора. Браузер сначала применяет стиль класса, а затем стиль идентификатора, поэтому стили идентификатора могут перезаписывать все, что класс установил ранее.
Некоторые другие вещи, которые нужно иметь в виду:
- При использовании ASP.Net вы не имеете полного контроля над идентификатором элементов, поэтому вам в значительной степени приходится использовать класс (обратите внимание, что это менее верно, чем когда-то).
Лучше не использовать ни то, ни другое, когда вы можете помочь. Вместо этого укажите тип элемента и его родительский тип. Например, неупорядоченный список, содержащийся в div с классом navarea, можно выделить следующим образом:
div.NavArea ul { /* styles go here */ }
Теперь вы можете стилизовать логическое разделение для большей части всей вашей области с помощью одного приложения класса.
Идентификаторы должны быть уникальными. Классы должны быть общими. Итак, если у вас есть CSS-форматирование, которое будет применяться к нескольким DIV, используйте класс. Если только один (как требование, а не случайность), используйте ID.
Где использовать идентификатор по сравнению с классом
Простое различие между ними состоит в том, что, хотя класс может использоваться на странице несколько раз, идентификатор должен использоваться только один раз на страницу. Следовательно, целесообразно использовать идентификатор элемента div, который обозначает основной контент на странице, так как будет только один основной раздел контента. Напротив, вы должны использовать класс для настройки чередующихся цветов строк в таблице, так как они по определению будут использоваться более одного раза.
Идентификаторы являются невероятно мощным инструментом. Элемент с идентификатором может быть целью фрагмента JavaScript, который каким-то образом манипулирует элементом или его содержимым. Атрибут ID может использоваться как цель внутренней ссылки, заменяя теги привязки атрибутами имени. Наконец, если вы сделаете свои идентификаторы ясными и логичными, они могут служить своего рода "самостоятельной документацией" в документе. Например, вам необязательно добавлять комментарий перед блоком, утверждая, что блок кода будет содержать основное содержимое, если открывающий тег блока имеет идентификатор, скажем, "main", "header", "footer". ", так далее.
Я думаю, что мы все знаем, что такое класс, но если вы будете думать об идентификаторах как об идентификаторах, а не как инструментах для стилизации, вы не ошибетесь. Вам нужен идентификатор, когда вы пытаетесь нацелиться на что-то, и если у вас есть несколько предметов с одинаковым идентификатором, вы больше не сможете идентифицировать его...
Когда дело доходит до написания вашего css для идентификаторов и CLASS, выгодно использовать как можно меньше минимальных классов css и стараться не слишком сильно разбираться с идентификаторами, пока вы НЕ ДОЛЖНЫ, иначе вы будете постоянно стремиться писать более сильные объявления и скоро есть файл css, полный! важных.
Классы предназначены для стилей, которые вы можете использовать несколько раз на странице, идентификаторы - это уникальные идентификаторы, которые определяют особые случаи для элементов. Стандарты говорят, что идентификаторы должны использоваться только один раз на странице. Поэтому вы должны использовать классы для случаев, когда вы хотите использовать стиль для более чем одного элемента на странице, и идентификатор, когда вы просто хотите использовать его один раз.
Другое дело, что для классов вы можете использовать несколько значений (помещая пробелы между каждым классом, как "класс ='blagh blah22 blah'), так как с идентификаторами вы можете использовать только идентификатор для каждого элемента.
Стили, определенные для идентификаторов, переопределяют стили, определенные для классов, поэтому в настройках стиля #uniquething будет переопределен стиль.whither, если два конфликтуют.
Поэтому вам, вероятно, следует использовать идентификаторы для таких вещей, как заголовок, ваша "боковая панель" или что-то еще, и так далее - вещи, которые появляются только один раз на странице.
Кроме того, элементом, которому вы даете определенный идентификатор, можно манипулировать с помощью команд JavaScript и DOM - например, GetElementById.
В целом, я нахожу полезным присвоить идентификаторы всем основным структурным элементам div - даже если изначально у меня нет особых правил CSS для применения, у меня есть такая возможность в будущем. С другой стороны, я использую классы для тех элементов, которые можно использовать несколько раз - например, div, содержащий изображение и подпись - у меня может быть несколько классов, каждый со слегка отличающимися значениями стиля.
Помните, что при всех равных правилах стиля в спецификации id имеют приоритет над правилами в спецификации класса.
Если вы используете веб-элементы управления.Net, то иногда гораздо проще просто использовать классы, так как.Net изменяет идентификаторы div веб-управления во время выполнения (где они используют runat="server").
Использование классов позволяет легко создавать стили с отдельными классами для шрифтов, интервалов, границ и т. Д. Обычно я использую несколько файлов для хранения отдельных типов информации о форматировании, например, basic_styles.css для простого форматирования всего сайта, т.е. 6_styles.css для стилей, специфичных для браузера. (в данном случае IE6) и т. д. и template_1.css для информации о макете.
Какой бы путь вы ни выбрали, старайтесь быть последовательными, чтобы помочь в обслуживании.
Я бы сказал, что лучше использовать класс всякий раз, когда вы думаете, что элемент стиля будет повторяться на странице. Такие элементы, как HeaderImage, FooterBar и тому подобное, подходят в качестве идентификатора, поскольку вы будете использовать его только один раз, и это поможет вам предотвратить его случайное дублирование, поскольку некоторые редакторы будут предупреждать вас, когда у вас есть дубликаты идентификаторов.
Я также считаю полезным, если вы собираетесь динамически генерировать элементы div и хотите настроить таргетинг на конкретный элемент; вы можете просто дать ему правильный идентификатор при генерации, а не искать элемент и затем обновлять его класс.
Мой выбор - использовать идентификацию классов, когда стили CSS применяются к нескольким элементам div одинаково. Если структура или контейнер действительно применяются только один раз или могут наследовать их стиль по умолчанию, я не вижу причин использовать идентификацию класса.
Так что это будет зависеть от того, является ли ваш div одним из нескольких; например, div, представляющий вопрос к ответу на веб-сайте stackru. Здесь вы хотите определить стиль для класса "Ответ" и применить его к каждому разделу "Ответ".
Используйте идентификатор для уникального элемента на странице, с которым вы хотите сделать что-то очень специфическое, и класс для чего-то, что вы могли бы повторно использовать в других частях страницы.
В дополнение к идентификаторам и классам, которые отлично подходят для установки стиля для отдельного элемента, в котором содержится аналогичный набор элементов, есть еще одно предостережение, которое нужно запомнить. Это также зависит от языка в некоторой степени. В ASP.Net вы можете добавить Div и иметь идентификаторы. Но если вы используете Panel вместо Div, вы потеряете идентификатор.
Если это стиль, который вы хотите использовать в нескольких местах на странице, используйте класс. Если вы хотите много настроек для одного объекта, скажем навигационная панель на боковой стороне страницы, тогда лучше использовать идентификатор, потому что вам вряд ли понадобится такая комбинация стилей где-либо еще.
id должен быть уникальным идентификатором элемента на странице, который помогает манипулировать им. Любой внешний стиль, определенный CSS, который предполагается использовать более чем в одном элементе, должен идти в атрибуте class
<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
Атрибут id используется для элементов, чтобы однозначно идентифицировать их в документе, тогда как атрибут class может иметь одинаковое значение, совместно используемое многими элементами в одном и том же документе.
Так что, на самом деле, если в документе есть только один элемент, который будет использовать стиль (например, #title), то используйте 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;}