CSS Лучшая практика по ID и классу?

Question

Я заглянул в книгу SitePoint по CSS.

В примерах меня поразило использование ID в качестве селектора CSS.

Некоторые элементы CSS-дизайна, которые я сделал, всегда находили проще и универсальнее использовать Class в качестве селектора.

Может быть, это вещь .Net, так как мы не всегда можем контролировать идентификатор элемента ...

Является ли наилучшей практикой использование CLASS или ID в качестве селектора?

Answer 1

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

В общем, эмпирическое правило таково, что вы должны спросить себя: «Есть ли более одного элемента, который требует одного и того же стиля, сейчас или в любое время в будущем?», И ответ даже «возможно» затем сделайте это классом.

Answer 2

Не забывайте, что class и ID не являются взаимоисключающими. Ничто не помешает вам иметь оба! Иногда это очень полезно, поскольку позволяет элементу наследовать общий стиль вместе с другими элементами того же класса, а также дает вам точный контроль над этим конкретным элементом. Еще одна удобная техника - применить несколько классов к одному и тому же объекту (да, class="someClass someOtherClass" вполне допустимо). Например:

<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 40em; 
}

div.narrow {
width: 10em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

Теоретически также возможно заставить CSS применяться только к элементам, которые принадлежат нескольким классам, например div.box.narrow {something: somevalue;} но, к сожалению, это поддерживается не во всех браузерах. Обновление 2011: Множество селекторов классов теперь имеют почти универсальную поддержку браузеров, так что пользуйтесь ими!

Answer 3

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

Answer 4

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

Answer 5

Практика зависит от «разрешения» того, что вы пытаетесь выбрать.

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

Answer 6

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

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

edit: и да, MS действительно разработал CSS с ASP.NET, спасибо, ребята!

Answer 7

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

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

Проверьте страницу W3C , а также страницу CSS-Discuss по этому вопросу.

Answer 8

Вы должны использовать «id», когда вы всегда говорите об одной (и всегда будет единственной) секунде вашего сайта.

По сути, это сводится к семантике.

div.header

Это говорит мне о том, что вы разрешаете использование нескольких "заголовков" на вашем сайте. Возможно, это подзаголовки.

div#header

Это говорит о том, что вы говорите об одном «разделе заголовка» макета вашего сайта.

РЕДАКТИРОВАТЬ: Вот небольшая статья о дизайне Pure CSS ... если вы просто отсканируете примеры CSS, вы поймете, почему я там использую идентификаторы: Как: дизайн Pure CSS

Answer 9

Пожалуйста, обратитесь к:

Не используйте селекторы идентификаторов в CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

Не используете идентификаторы в селекторах CSS ?: http://oli.jp/2011/ids/

Answer 10

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

Использование идентификаторов плохо, как и использование глобальных переменных в коде Visual Basic. Причина в том, что идентификаторы должны быть уникальными, что вносит ненужную и плохую зависимость между различными независимыми частями вашего кода. Лучше использовать что-то вроде .page1 .tab1> .field1, потому что вам не нужно беспокоиться об уникальности field1 внутри tab1 или об уникальности tab1 внутри page1. С идентификаторами вы должны вести реестр своих идентификаторов, чтобы сохранить контроль и избежать коллизий.

Используйте идентификаторы, только если вам нужно, например, href = '# name' или если какая-то библиотека требует от вас.