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