减少所需HTML的最佳CSS技巧是什么？

Question

什么是最聪明的CSS技术，可以让你使用更少的HTML？

使用CSS的一个优点是它可以让您简化HTML，并完全在CSS中产生外观和感觉效果。起初，这只是用CSS替换已弃用的HTML演示标记和间隔GIF，但近年来出现了更多好的想法。

我正在寻找比以下技术更不明显的东西。

- 用CSS边框替换HTML HR，以分隔已经是DIV的部分。 - 用CSS背景图像替换HTML IMG，用于不是“内容”的图形。 - 使用CSS：before和content替换HTML文本，用于不是“内容”的文本。

我不要寻找涉及添加JavaScript或更多HTML（例如其他DIV元素）的技术。

只在特定浏览器和版本中有效的技术可以，前提是您说明哪些浏览器和版本。

- Peter Hilton

---

使用无序列表（UL）来创建菜单。 - Natrium

我不同意你的第一点是“好事”。<hr>具有有效语义含义的 <hr> 标签，使用并适当地样式化它们是有意义的。 - nickf

我们可能会同意 - 当然，HR具有语义含义，但并不总是有意的。有时“设计师”只想要一条水平线。 - Peter Hilton

Answer 1

通过为元素本身提供唯一标识符，可以避免在div中嵌套元素而省略特定性。

<div id="mylist">
    <ul>
       <li>ListItem1</li>
       <li>ListItem2</li>
    </ul>
</div>

替换为

<ul id="mylist">
    <li>ListItem1</li>
    <li>ListItem2</li>
</ul>

那么您的CSS将从以下内容开始：

div#mylist ul li { }

to

ul#mylist li { }

这将减少HTML代码。

编辑: 在不必要的情况下 :)

- Kezzer

---

我不反对这个观点，但有时候可能会出现不必要的情况。 - Kieran Senior

我从来不会默认在所有元素周围添加额外的div。 - JohnB

Answer 2

使用巧妙的CSS选择器代替额外的类或ID。

---

以下是一个例子（导航列表似乎很流行）：

<ul class="nav">
    <li class="section">Section 1<ul class="subnav">
        <li class="subsection">Section 1.1</li>
        <li class="subsection">Section 1.2</li>
        ⋮
    </ul></li>
    <li class="section">Section 2<ul class="subnav">
        <li class="subsection">Section 2.1</li>
        <li class="subsection">Section 2.2</li>
        ⋮
    </ul></li>
    ⋮
</ul>

更好的写法：

<ul id="nav">
    <li>Section 1<ul>
        <li>Section 1.1</li>
        <li>Section 1.2</li>
        ⋮
    </ul></li>
    <li>Section 2<ul>
        <li>Section 2.1</li>
        <li>Section 2.2</li>
        ⋮
    </ul></li>
    ⋮
</ul>

#nav {
    /* first level list */
}
#nav li {
    /* first level items */
}
#nav li ul {
    /* second level list */
}
#nav li ul li {
    /* second level items */
}
⋮

- Gumbo

---

这就是让我减小文件大小最大的原因。多年来，CSS选择器变得非常强大，我很容易将HTML中ID/Class的使用量减少30-40％。有时您应该使用额外的类使其不太抽象，但CSS选择器是减小文件大小的好方法http://www.w3.org/TR/css3-selectors/。使用HTML 5标签也可以减少选择器的数量，因为现在您可以直接访问这些元素，如nav、header、footer等。 - user238801

Answer 3

我认为问题实际上是反过来的，我能提供的最好技巧是在编写标记时甚至不要考虑CSS。

无论如何，您的标记应该努力独立于样式，并且应该高效地最小化以包含恰好需要传达其数据并指示其自身内部分类和身份的内容。 然后您考虑CSS在孤立的情况下如何操作。

这是一个无法实现的理想，但采用面向对象的方法来处理标记和CSS是前进的方向。

- annakata

Answer 4

最近这个问题再次引起了争议，以下是使用div和table实现三列布局的区别：

<table>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
  </tbody>
</table>

相比之下：

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>

以及CSS

div { float:left; width:33%; }

- Phil

---

这是一个老的争论...大多数人已经接受了无表设计的理念。 - Chuck Conway

这不是关于无表格设计，而是关于语义正确性，Phil的例子可能是一个需要使用表格的情况，如果没有数据上下文，很难说清楚。 - annakata

虽然我意识到这个辩论已经很老了，但最近由于37signals的提出，它又再次引起了争议。谢谢annakata，我应该指出这是用于布局而不是数据表格，在数据表格中显然应该使用表格。 - philnash

Answer 5

首先，您应该规划和构建您的HTML。

假设您的网站有一个带有页眉和页脚的3列布局。每个容器都将有一个ID，例如#mainColumn、#leftColumn、#rightColumn - 都在#container内。这些在所有页面上都是相等的。

然后，假设您使用此布局构建了3个页面，并且内容结构类似 - 标题、标题、文本以及列中的一些列表。例如：

• 主页
• 爱
• 恨
• 迷幻

如果您将.love设置为与#container相同的div，则可以更改站点上所有编辑元素的颜色，这在爱（粉色）、恨（黑色和红色）和迷幻（许多颜色！）上是自然的...

但是在主页上，您可能希望总结所有类别，因此您会在编辑内容的块上放置.love、.hate和.stoned类，或者仅在#rightCol、#leftCol和#mainCol上放置这些类。

这只是一个非常基本的例子，但关键是在您疯狂敲击键盘之前，先规划您的网站布局和结构。

- olemarius

---

当你想要改变页面布局时，将列命名为#leftColumn和#rightColumn是相当限制性的。 - Ciaran McNulty

同意 :-) 但这只是一个快速的例子。 - olemarius

Answer 6

使用CSS可以减少对HTML的需求。你使用CSS越多，所需的HTML就会越少。我在这个主题中投了每一个答案的赞成票，因为它们都在自己的方式上是正确的。

考虑你的HTML结构语义和相关性。建立长字符串的选择器意味着你将缩小文档中的钩子。同样，你经常可以为已经存在的元素添加类来节省<div>或<span>标记。

所有这些说法，我最喜欢的技巧是巧妙地使用background属性来节省<img>标记。

- Jeremy DeGroot