Дилемма в решении, как создать CSS для H1, H2, H3 и т. Д.

Question

В настоящее время у меня есть несколько общих стилей H1, H2, H3 для моего сайта, которые отлично подходят для большинства «общих» заголовков, где мне нужен простой «традиционный» заголовок.

 h1 { /* lots of style attributes */ }
 h2 { /* lots of style attributes */ }
 h3 { /* lots of style attributes */ }

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

 <div class="titledimage"><h1>Section header</h1><img .../></div>

 .titledimage h1 { color:red; bottom-border: 1px solid blue; }

Проблема, с которой я сталкиваюсь, состоит в том, что h1 в titledimage также является h1, как определено ранее, поэтому он наследует все стили, определенные в h1. Это обычно нежелательно - я просто хочу red и 1px solid blue для заголовка в .titledImage div.

Я читал и пытался ответить на этот вопрос о стилях H1 . Мой вывод заключается в том, что если вы используете определенные стили заголовков (.titledimage h1), вы не можете использовать общие стили заголовков (h1), если:

 a) you reset every style attribute in the '.titledimage h1' style
 b) you just use a class name instead of h1
 c) your `h1` style is defined with very few attributes that you'd 
    be overriding anyway

Я заметил, что для стилизации элемента управления YUI они на самом деле используют H6, и мне интересно, делают ли они это, чтобы избежать подобных конфликтов.

Должен ли я

a) be using <h6> like yahoo does?
b) reset every attribute defined by `h1` when I define `.titledimage h1` ?
c) just use a class name for `.titledimage header`, and leave 
   `h1`, `h2`, `h3` for 'traditional more logical headers' 
d) something else

в идеале я хотел бы сказать это, но нет такого (насколько мне известно)

 .titledimage h1 { inherit: none; color:red; bottom-border: 1px solid blue; }

Answer 1

Сброс мне кажется расточительным. Должен быть чистый способ применения /* lots of style attributes */ к тегам h1, к которым вы хотите применить его, при этом не применяя его к h1 в пределах .titledimage.

Скажем, у вас было:

<div class="top"><h1>PageName</h1></div>
<div class="leftNavigation"><h1>Cat1</h1><h1>Cat2</h1><h1>Cat3</h1></div>
<div class="rightMarginNote"><h1>Username</h1></div>
<div class="content">
 <h1>CONTENT</h1>
 <div class="titledimage">
  <h1>title</h1>
 </div>
</div>

Тогда вы бы хотели, чтобы ваш CSS немного походил на:

.top h1, .leftNavigation h1, .rightMarginNote h1, .content > h1 {
  /* lots of style attributes */
}
.similarly h2 { /* lots of style attributes */ }
.similarly h3 { /* lots of style attributes */ }
.titledimage h1 { color:red; bottom-border: 1px solid blue; }

Вместо альтернативы

h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
.titledimage h1, .otherCase h1, .anotherCase h1, yetAnotherCase h1 {
  /* lots of style backtracking */
}
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
.otherCase h1 { color:blue; bottom-border: 1px solid blue; }
.anotherCase h1 { color:green; bottom-border: 1px solid blue; }
.yetAnotherCase h1 { color:mauve; bottom-border: 1px solid blue; }

Также сгруппируйте как можно больше этих штук H1-H5 вместе, и, если вам необходимо использовать оповещение, определите класс специально для сброса, который применяется не к h1, а к содержащему div любого класса. *

<div class="titledimage hReset"><h1>title</h1></div>

Answer 2

Ну, простое решение - не вкладывать тег h1, то есть:

<div class="different-header-style">Some Header</div>

Если у h1 нет желаемого стиля, который вы хотите, то зачем его использовать?

Кроме того, лучше, чем вложение в div для стиля, я бы сделал это:

<h1 class="special-header">Some Header</h1>

h1 - это блочный элемент, который в любом случае можно стилизовать как div (border, width и т. Д.).

Answer 3

б) сбросить каждый атрибут, определенный h1 когда я определяю .titledimage h1?

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

<div class="titledimage"><h1>Section header</h1><img .../></div>
<div class="titledimage"><h2>Section header</h2><img .../></div>
<div class="otherimage"><h1>Section header</h1><img .../></div>

Я думаю, что лучше подходить к определению сброса в отдельном классе

.hreset {
  /* Reset the header styles here */
}

Затем вы можете повторно использовать эти сбросы везде, где необходимо, например,

<div class="titledimage"><h1 class="hreset">Section header</h1><img .../></div>
<div class="titledimage"><h2 class="hreset">Section header</h2><img .../></div>
<div class="otherimage"><h1 class="hreset">Section header</h1><img .../></div>