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

Question

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

img.className

против

.className

против

#idName

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

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

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

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

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

Answer 1

Как правило, вы должны быть настолько конкретны, насколько этого требует пункт .

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

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

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

Я также настоятельно рекомендую вам использовать высокоуровневые идентификаторы для элементов-оболочек, чтобы вы могли писать селекторы в пространстве имен, например, в стиле (например, #foo .bar, #foo .baz, где #foo уникален для страницы или набора страниц). дизайн), который обеспечивает как уровень специфичности, который уменьшает загрязнение между проектами, так и уровень универсальности, позволяющий максимально эффективно использовать каскадное повторное использование CSS.

Лучшее из обоих миров.

Answer 2

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

• # idName для уникальных элементов на странице. Хорошие примеры: #header и #footer
• TAGNAME для стилизации страницы общего назначения.
• TAG.classname и .classname для исключений / переопределений вышеупомянутых правил.

И не забудьте использовать расширенные селекторы. Плохой пример:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

То же самое можно было бы достичь с помощью:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

Второй пример избавляет от лишнего атрибута "class" в элементе H1 в div "mainMenu". Это имеет два важных преимущества:

1. HTML-код меньше и чище
2. Вы с меньшей вероятностью забудете добавить атрибут класса

Если вы хорошо заботитесь о своем CSS и используете правильные расширенные селекторы, вы можете почти полностью пропустить классы CSS. И сохраняйте их только для исключений / переопределений.

Возьмите этот пример, который рисует прямоугольники с заголовками:

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

Теперь, как только вы последуете за H2 с DIV в элементе #content, у вас есть хорошая коробка. остальные DIVs и H2 s остаются одни:

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

Если вы правильно поняли эти правила, вам вряд ли понадобятся классы, и вы сможете работать только с идентификаторами и именами TAG. И в качестве дополнительного бонуса, ваш HTML будет намного приятнее читать и поддерживать.

Answer 3

вы должны использовать селектор, наилучшим образом описывающий ваши правила

• id: когда вы хотите выбрать один элемент

• .classname: когда вы хотите стилизовать элементы независимо от их тега
• tag.classname: когда вы хотите стилизовать только теги с данным классом
• tag tag tag: когда вы хотите стилизовать все подэлементы тега

Answer 4

Класс селекторов

.className

Это нужно использовать, когда у вас есть несколько элементов на странице, к которым вы хотите применить один и тот же стиль. Это может быть любой элемент тега. Таким образом, в дальнейшем все будут использовать тот же стиль, который установлен в .className.

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

Но вы также можете ограничить это так:

img.className

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

HTML-код будет выглядеть так:

<img src="/path/to/image.png" class="className" />

Если у вас есть другие элементы на странице, использующие тот же стиль класса, но не имеющие одного и того же тега, то стили, изложенные в этом, не будут применены, и они примут более общую версию, упомянутую в первом пример.

Итак, повторим приведенный выше пример:

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

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

Селекторы ID

#idName

Используется, когда есть только один экземпляр определенного элемента, к которому вы хотите применить стиль.

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

p#idName

Этот пример будет применяться только к блоку абзаца, помеченному идентификатором:

<p id="idName">

Если вы поместите это id в другой элемент, например:

<div id="idName"></div>

Тогда он не примет изложенный стиль и будет игнорироваться.

Answer 5

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

1. ID

2. бирка
3. tag.className
4. .className

Селекторы ID быстрые. Селектор тегов достаточно быстрый. Чистые селекторы классов работают медленно, потому что браузер по сути должен опросить каждый элемент и посмотреть, есть ли у каждого этот класс. Получение элементов по идентификатору или имени тега является «нативной» операцией из контекста браузера.

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

Обычно, если вы знаете, что используете только класс элементов div, сделайте это

div.className

не

.className

Если вы применяете класс к нескольким элементам, просто перечислите их:

h1.selected, h2.selected, h3.selected

вместо

.selected

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

Answer 6

Я знаю, что это довольно старый вопрос, но для всех тех, кто читает это только сейчас ... Всего существует 4 категории правил: Правила ID, Правила класса, Правила тегов, Универсальные правила. И важно отметить, что селекторы class быстрее , чем tag селекторы. Поэтому вы всегда должны использовать их в следующем порядке
1. Идентификатор селектора
2. Селектор класса
3. Селектор тегов
4. Универсальные селекторы

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

Вы можете найти больше информации здесь: Написание эффективного CSS

Answer 7

Стоит отметить, что некоторые технологии сценариев на стороне сервера (особенно ASP.NET) плохо работают с использованием идентификаторов для вашего стиля. Если есть вероятность, что ваш дизайн будет использоваться с такой технологией, я рекомендую забыть о #id селекторах и использовать вместо них tag.className.

Причина в том, что ASP.NET фактически изменяет идентификатор, который заканчивается в HTML, на основе ряда критериев, если тег выводится серверным элементом управления.

Answer 8

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

Answer 9

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

Как вы структурируете свой CSS, будет зависеть от конкретных потребностей дизайна.

Answer 10

Это действительно зависит от ситуации:

.error{
  color:red;
}

p.error{
  background-color:yellow;
}

div.error{
  background-color:grey;
}

Всегда используйте каскадный эффект C SS в ваших интересах.