Есть ли какие-либо плюсы и минусы, если я всегда использую CSS-class вместо CSS ID для всего?

В CSS мы можем использовать как ID, так и class. есть ли какие-либо плюсы и минусы, если я использую Class всегда вместо ID в терминах семантических, веб-стандартов – W3C, SEO, доступности и будущей ремонтопригодности?

Одна большая разница: в CSS class имеет более низкий уровень важности, чем идентификатор.

Представьте, что каждая спецификация в объявлении CSS добавила определенное количество точек к значению этого объявления. Скажем, точки идут примерно так (полностью составленные, но что угодно):

  • Название тега (‘a’, ‘div’, ‘span’): 1 балл
  • Название classа («.highlight», «.error», «.animal»): 10 баллов
  • ID (‘# main-headline’, ‘#nav’, ‘#content’): 100 баллов

Итак, следующие объявления:

a { color: #00f; } .highlight a { color: #0f0; } #nav .highlight a { color: #f00; } 

стоят 1, 11 и 111 баллов (соответственно). Для данного тега объявление с наибольшим количеством точек, которое соответствует ему, «выигрывает». Так, например, с этими объявлениями все tags будут синими, если только они не находятся внутри элемента с classом «highlight», и в этом случае они будут зелеными, если только этот элемент не находится внутри элемента с id = «nav », и в этом случае они будут красными.

Теперь вы можете попасть в сложные ситуации, если используете только classы. Предположим, вы хотите, чтобы все ссылки в области содержимого были синими, но все ссылки в вашей области foo красные:

 .content a { color: #00f; } .foo a { color: #f00; } 

По моей предыдущей (составленной) шкале оба имеют 11 очков. Если у вас есть foo в вашем контенте, который побеждает? В этой ситуации foo выигрывает, потому что это происходит. Теперь, возможно, это то, что вы хотите, но это просто повезло. Если вы передумаете позже и хотите, чтобы контент выигрывал, вы должны изменить свой порядок, и в зависимости от порядка деклараций в файле CSS это «Плохая идея». Теперь, если вместо этого у вас было следующее объявление:

 #content a { color: #00f; } .foo a { color: #f00; } 

Содержимое всегда будет выигрывать, потому что это объявление имеет значение 101 (избиение foo’s 11). Независимо от того, в каком порядке они входят, декларация содержимого всегда будет бить foo. Это дает вам очень важную последовательность. Победители не будут произвольно изменяться в зависимости от изменения заказов в файле, и если вы хотите изменить победителя, вы должны изменить объявления (возможно, добавьте #content перед объявлением .foo, поэтому он будет иметь 111 точки).

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

Я знаю, что я не «норма» здесь, и я позабочусь об этом … но я использую только class и использую только ID для скриптов 🙂

Это создает четкую линию разделения дизайнерских и кодер связанных настроек и изменений, что очень удобно для нас !.

Кроме того, у нас есть некоторые .NET-коннекторы веб-форм (хотя мы перемещаем все сайты в MVC), и поскольку элементы управления .NET используют идентификаторы для динамического сценария, используя идентификаторы для CSS, это боль … я не поклонник использования # ct00_ct02_MyControlName в css-файлах, и даже если бы я был в коде, это может сломать CSS! Классы работают БОЛЬШОЕ для этого.

Некоторые PHP-библиотеки других компаний используют также необходимость использования динамического присвоения идентификаторов, что также создает проблему. снова Классы работают БОЛЬШОЙ здесь.

Поскольку все больше и больше этих динамических выходов и языков используют идентификаторы (именно то, что они действительно предназначены для … идентификации элемента для работы с ним), может быть все больше и больше больно работать с идентификаторами в CSS.

Мне кажется, что каждый хочет использовать их просто потому, что они думают, что должны, потому что они «есть», я предлагаю идею о том, что идентификаторы вообще отсутствуют для CSS, и их использование в CSS просто в качестве дополнительного помощника через селектор и их реальное использование – это скриптинг.

Там не было ни одного экземпляра, где мне нужен идентификатор для использования css или даже один экземпляр, где он был бы eaiser.

Но, возможно, я просто привык к этому и вот почему? Мой вывод HTML невелик, мои файлы CSS небольшие и прямые. Вложенные элементы работают во всех браузерах, как я ожидаю, у меня нет проблем и вы можете создавать сложные красиво оформленные страницы. Изменения требуют нескольких минут, так как я могу применить несколько classов к элементу или создать новый.

ID для скриптов, CLASS для css … работает.

Обильно нет серьезной проблемы (даже в команде дизайнеров и кодеров) в использовании их как для css, так как мы все привыкли к тому, к чему мы привыкли :), но так, как мы работаем, он быстро выводит ожидаемые результаты, и никто не может шаг на любых ногах даже в автономных средах совместного использования.

Мой самый большой из них будет с точки зрения будущего обслуживания. Не только приятно знать, что стиль используется только для одного элемента на странице, но если вы когда-либо запустили интегрированный javascript на свою страницу, вам будет удобно получать доступ к элементам быстро, используя свои идентификаторы, а не пытаться получить к ним доступ classа.

Если вы используете приличную библиотеку javascript (например, прототип или jQuery), тогда нет, я не могу думать о каких-либо технических причинах, почему это имеет значение. Тем не менее, это может помочь вашему собственному внутреннему мышлению и согласованности отдельно подумать о том, является ли это атрибутивной коллективной характеристикой (=> class) или конкретным элементом (=> ID).

Используйте id когда элемент уникален на странице, и вы всегда ожидаете, что это будет. Используйте class когда нескольким элементам будет присвоено значение атрибута. Это правда, что это не может сильно отличаться от чисто CSS-перспективы, но с точки зрения JavaScript или Selenium, очень важно иметь возможность однозначно идентифицировать элементы по их атрибуту id .

Смотрите следующее:
CSS Лучшая практика по ID и classу?

Для SEO: это абсолютно не имеет никакого отношения к SEO.

Вы должны выбрать имена, которые отражают семантический контент этого раздела. например: id = “leftMenu” class = “footerNotes”

Не используйте символы подчеркивания в вашем classе и именах имен (распространенная ошибка).

В простом мы можем определить id и class, как показано ниже

 ID = A person's Identification (ID) is unique to one person. Class = There are many people in a class. 

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

Идентификаторы хороши для элементов, которые должны быть доступны из JavaScript. Но идентификаторы должны быть уникальными на странице в соответствии со стандартами w3, то есть:

  • вы не можете иметь два

    в одном документе

  • вы не можете иметь

    и

    в одном документе

Имена classов хороши для элементов, которые не требуют доступа к JavaScript (хотя это возможно). Одно имя classа может использоваться для нескольких элементов, и один элемент может иметь более одного имени classа, прикрепленного к нему. Поэтому имена classов позволяют создавать более «общие» определения css, например:

  • – все три могут быть в одном документе

Вы можете смешивать идентификаторы и classы вместе.

Подводя итог: используйте идентификаторы для конкретных случаев; имена classов для общих случаев; и каскадные classы для элементов, которые имеют общие свойства, но не все.

Единственное различие между classами и идентификаторами, за исключением того, что идентификатор ДОЛЖЕН быть уникальным, а class – нет, заключается в том, что браузер может использовать идентификатор элемента для навигационных целей. Например, на этой странице есть логотип с id = “hlogo”. Если вы добавите URL-адрес этой страницы в hash-файл #hlogo, например https://stackoverflow.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class- вместо-css-id-for-everythi # hlogo , браузер автоматически перейдет к логотипу.

  • Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?
  • Установить проверку classа для динамического текстового поля в таблице
  • Как применить class CSS к Html.ActionLink в ASP.NET MVC?
  • IE7 относительная / абсолютная ошибка позиционирования с динамически измененным содержимым страницы
  • Как удалить дополнительное пространство полей, созданное встроенными блоками?
  • Предполагается, что селектор CSS: not () должен работать с отдаленными потомками?
  • Селектор родительских / предков CSS
  • Как перезаписать стиль в Twitter Bootstrap
  • CSS Child vs Descendant selectors
  • Добавьте границу CSS при наведении курсора, не перемещая элемент
  • Блокнот ++: как добавить возврат каретки (нажатие клавиши ввода) после определенного символа
  • Давайте будем гением компьютера.