Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

  • Название тега ('a', 'div', 'span'): 1 балл
  • Имя класса ('.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 баллов (соответственно). Для данного тега объявление с наибольшим количеством точек, которое соответствует ему, "выигрывает". Например, с этими объявлениями все теги a будут синими, если только они не находятся внутри элемента с классом "highlight", и в этом случае они будут зелеными, если только этот элемент не находится внутри элемент с id = "nav", и в этом случае они будут красными.

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

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

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

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

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

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

Ответ 2

Я знаю, что я не "норма" здесь, и я позабочусь об этом... но я использую только класс и использую только ID для сценариев:)

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

Также у нас есть некоторые .NET-коннекторы веб-форм (хотя мы перемещаем все сайты в MVC), а так как элементы управления .NET принимают ID на script, динамически используя ID для CSS, это боль... я не поклонник использования # ct00_ct02_MyControlName в css файлах, и даже если бы я был сменой кода, это может сломать CSS! Классы работают GREAT для этого.

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

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

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

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

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

Идентификатор для скриптов, CLASS для css... работает.

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

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

Ответ 7

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

ID = A person Identification (ID) is unique to one person. 
Class = There are many people in a class.
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript getElementByID function, in which case you need use ID.

Ответ 8

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

  • у вас не может быть два <div id="Header"> в одном документе
  • вы не можете иметь <div id="Header"> и <p id="Header"> в одном документе

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

  • <div class="column">
  • <div class="column left-column">
  • <div class="column right-column"> - все три могут быть в одном документе

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

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

Ответ 9

Единственное различие между классами и идентификаторами, за исключением того, что идентификатор ДОЛЖЕН быть уникальным, а класс - нет, заключается в том, что браузер может использовать идентификатор элемента для навигационных целей. Например, на этой странице есть логотип с id = "hlogo". Если вы добавите на эту страницу URL-адрес хеша #hlogo, например fooobar.com/info/231819/..., браузер автоматически перейдет к логотипу.