Использовать имена тегов HTML, классы или идентификаторы в CSS?

Question

При разработке HTML и CSS для страницы, когда мне следует использовать

img.className

против

.className

против

#idName

или какой-то другой вариант?

Существуют ли рекомендации или рекомендации?

Резюме из ответов

Спасибо всем ответчикам - здесь есть кое-что отличное!

• сделать CSS как можно более конкретным
• использовать подход ОО
• заказ: #id, tag, tag.className, .className
• когда использовать каждый селектор , также сравнение классов / идентификаторов
• дают имена селекторов в зависимости от цели, а не от того, как они выглядят
• использовать расширенные селекторы для меньшего кода, оставить CSS-классы только для исключений / переопределений
• управление идентификатором подключения ASP.NET

Answer 1

Когда использовать то, что зависит от того, что вы хотите выбрать. img.className ( селектор типа + селектор класса ) выбирает только элементов IMG, находящихся в классе «className», тогда как .className (просто селектор класса) выбирает любой элемент, который находится в этом классе, и #idName ( селектор идентификатора ) любой элемент с идентификатором «idName».

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

Итак, если у вас есть элемент IMG с идентификатором «idName», который находится в классе «className»:

<img src="…" id="idName" class="className">

Свойства правил будут применяться в следующем порядке (специфичность от высшего к низшему):

1. #idName
2. img.className
3. .className

Но когда вы используете определенный класс только для одного определенного типа элементов (например, «className» только для элемента IMG), вы можете использовать только .className.

Answer 2

Да. Возможно, вы захотите использовать одно и то же имя класса для двух элементов в будущем. Будь явным и понятным. Это также предотвратит наложение правил класса на непредусмотренные элементы.

h1.title { font-size:18px; } /* My h1's are big */
 p.title { font-size:16px; } /* My p's are smaller */

  .title { color:#336699; }  /* All titles are blue */

Используйте идентификаторы только при необходимости и только один раз на страницу.