决定如何为 H1、H2、H3 等创建 CSS 的困境

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

我遇到的问题是titledimage下的h1也是前面定义的h1，所以它继承了h1定义的所有样式。这通常是不希望的 - 我只想要 red 和 1px solid blue 作为 .titledImage div 中的标题。

我正在阅读并尝试回答 this question about H1 styles。我的结论是，如果你正在做特定的标题样式（.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

我注意到他们实际上使用H6 来设置YUI menu control 的样式，我想知道他们是否这样做是为了避免此类冲突。

我应该

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 标签，而不是将它应用到.titledimage 中的h1。

说你有：

<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 一样设置样式（边框、宽度等）。

Answer 3

b) 重置每个定义的属性 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>