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

Ответ 1

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

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

Ответ 2

Не забывайте, что класс и идентификатор не являются взаимоисключающими. Ничто не мешает вам иметь обоих! Иногда это очень полезно, поскольку позволяет элементам наследовать общий стиль вместе с другими элементами одного и того же класса, а также дает вам точное управление этим конкретным элементом. Еще один удобный способ - применить несколько классов к одному и тому же объекту (да, 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:. Несколько селекторов классов теперь имеют почти универсальную поддержку браузера, поэтому используйте их!

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

В принципе, это сводится к семантике.

div.header

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

div#header

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

EDIT: вот полу-старая статья о чистом CSS-дизайне... если вы просто просматриваете примеры CSS, вы увидите, почему я использую ID: Как: Чистый дизайн CSS

Ответ 8

Идентификаторы предназначены для однозначно идентифицирующих элементов. Классы предназначены для идентификации элемента как части класса элементов.

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

Отметьте спецификацию W3C, а также CSS-Discuss по этой проблеме.

Ответ 9

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

Ответ 10

Обратитесь к:

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

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

Ответ 11

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

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

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