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

Я погружался в книгу SitePoint относительно CSS.

То, что поразило меня в примерах, было использование идентификатора в качестве селектора CSS.

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

Возможно, это вещь .Net, поскольку мы не всегда имеем контроль над идентификатором элемента …

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

11 Solutions collect form web for “CSS Лучшая практика по ID и classу?”

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

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

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

 
a wide box
a narrow box
an odd box

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

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

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

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

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

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

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

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

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

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

 div.header 

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

 div#header 

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

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

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

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

Проверьте спецификацию W3C, а также страницу CSS-Обсудить эту проблему.

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

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

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

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

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

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

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

  • Разница между CSS-селектором и фильтром jQuery?
  • CSS - почему не работает процентный рост?
  • YouTube Video Встраивается через iframe Игнорирует z-index?
  • В чем разница между дисплеем: встроенным и отображаемым: встроенный блок?
  • Сделать flex-grow расширять элементы на основе их первоначального размера
  • Что означает селектор CSS ~ (tilde / squiggle / twiddle)?
  • Создайте сетку масонства с помощью flexbox (или другого CSS)
  • Каков наилучший способ условного применения classа?
  • Слайд справа налево?
  • Выбрать элемент на основе нескольких classов
  • Можно ли центрировать текст в поле выбора?
  • Давайте будем гением компьютера.