Класс против идентификатора с вложенным CSS

Question

Предположим, HTML-код выглядит следующим образом:

<div id="header">
  <span class="title">Title</span>
  <!-- more spans and other things here -->
</div>

Это будет работать вместе с вложенным CSS:

#header .title { /* CSS */ }

Это работает, конечно, но мне не нравится использованиеclass здесь.Поскольку мне нужен стиль title только один раз, я хотел бы использовать идентификатор.Но тогда имя должно быть примерно таким: header_title (так как у меня могут быть другие заголовки в HTML), что приведет к CSS

#header #header_title { /* CSS */ }

Теперь это, кажется, противоречит цели вложенного CSS, тогдаЯ мог бы просто бросить первый #header полностью.

Я не могу найти способ сделать это "правильно".Я что-то упустил или мне просто нужно жить с каким-то «грязным» кодом здесь?

Answer 1

Использование #id .class {style:rules;} не является "грязным".Это правильный способ сделать это.Кроме того, если у вас «могут быть другие заголовки в HTML», было бы еще правильнее использовать классы, а не иметь 15 правил на основе идентификатора.

Answer 2

Это на самом деле не имеет значения.

Что важно в вашей разметке, так это то, что она читаема ;HTML подразумевает семантику , так что ваша разметка представляет ваш контент.Таким образом, если вы вернетесь к своему HTML несколько месяцев спустя, не касаясь его, вы сможете быстро понять, что вы написали:)

Семантически, #header .title делает намного большесмысл для меня более #header #header_title по двум причинам;один, так как его легче читать, и два, так как цель идентификаторов, ну, в общем, идентифицировать!Вы можете использовать #header_title сам по себе, но он намного чище для ограничения количества идентификаторов, которые у вас есть.

Answer 3

Похоже, вы больше беспокоитесь о соглашении об именах.

Вполне допустимо просто использовать

 #header #title {/** css **/}

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

Я не уверен, почему вы решили использовать span вместо h1, h2, потому что я бы просто сделал

 #header h1 {/** css **/}

, поскольку у вас, скорее всего, будет только один тег h1 в вашем #заголовок

Answer 4

Используйте идентификатор, если существует только один элемент, который вы хотите стилизовать, поскольку идентификаторы нельзя дублировать.Если существует вероятность того, что может быть несколько элементов с классом title (как внутри, так и снаружи #header div), то придерживайтесь своего первого примера CSS, поскольку это обеспечит то, что только элементы с классом заголовкавнутри элемента #header будет применен стиль.

Это действительно зависит от того, как выглядит остальная часть вашего HTML и как вы пытаетесь его стилизовать.

Answer 5

Как насчет использования тегов заголовка

#title h1{/* CSS */}

<div id="header">
    <h1>Title</h1>
</div>

Полагаю, для этого есть теги:)