Dilemma bei der Entscheidung, wie man CSS für H1, H2, H3 usw. erstellt

Question

Ich habe derzeit einige allgemeine H1, H2, H3 Stile für meine Website, die für die meisten "allgemeinen" Überschriften, bei denen ich eine einfache "traditionelle" Überschrift brauche, gut funktionieren.

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

Ich erstelle auch einige Komponenten, bei denen ich so etwas habe, d.h. ich brauche eine Kopfzeile, die für diesen bestimmten Typ von Steuerelement spezifisch ist.

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

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

Das Problem, auf das ich stoße, ist, dass die h1 unter titledimage ist auch ein h1 wie zuvor definiert, so dass es alle Stile erbt, die durch h1 . Dies ist im Allgemeinen unerwünscht - ich möchte nur red y 1px solid blue für die Kopfzeile in der .titledImage div.

Ich habe gelesen und versucht zu antworten diese Frage über H1-Stile . Meine Schlussfolgerung ist, dass, wenn Sie tun spezifische Kopfzeile Stile (.titledimage h1) können Sie nicht wirklich tun, generische Kopfzeile Stile (h1) es sei denn:

 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

Ich habe festgestellt, dass für das Styling der YUI-Menüsteuerung sie verwenden tatsächlich H6 und ich frage mich, ob sie das tun, um solche Konflikte zu vermeiden.

Sollte ich

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

Im Idealfall würde ich das gerne sagen, aber so etwas gibt es (meines Wissens) nicht.

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

Answer 1

Das Zurücksetzen erscheint mir verschwenderisch. Es muss einen sauberen Weg geben, um die /* lots of style attributes */ になります。 h1 Tags, auf die sie angewendet werden soll, während sie nicht auf die h1 innerhalb einer .titledimage .

Sagen wir, Sie hatten:

<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>

Dann sollten Sie Ihr CSS ein wenig wie:

.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; }

Statt der Alternative

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; }

Gruppieren Sie auch so viel von dem H1-H5-Zeug zusammen wie möglich, und wenn Sie mit der Alternative gehen müssen, definieren Sie eine Klasse speziell für die Rückstellung, die nicht auf die h1, sondern auf die enthaltende div jeder Klasse angewendet wird.

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

Answer 2

Nun, die einfache Lösung besteht darin, kein h1-Tag zu verschachteln, d.h.:

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

Wenn h1 nicht das gewünschte Styling hat, warum sollte man es dann verwenden?

Auch besser als Verschachtelung es in einem div nur für Stil würde ich dies tun:

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

h1 ist ein Blockelement, das Sie wie ein div gestalten können (Rahmen, Breite usw.).

Answer 3

b) jedes Attribut zurücksetzen, das durch h1 wenn ich definiere .titledimage h1 ?

Das Problem bei diesem Ansatz ist, dass Sie die zurückgesetzten Stile nicht für andere Kopfzeilen mit spezifischen Stilen wiederverwenden können, z. B.

<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>

Ich denke, ein besserer Ansatz wäre, Ihre Rücksetzungen in einer separaten Klasse zu definieren

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

Sie können diese Rückstellungen dann bei Bedarf wiederverwenden, z. B.

<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>