什么是最好的CSS技巧,以减少您需要多少HTML？

Question

什么是最聪明的CSS技术,让您使用更少的HTML？

使用CSS的一个优点是它可以让你简化你的HTML,并完全在CSS中产生外观效果.一开始,这只是用CSS替换弃用的HTML表示标记和spacer-GIF,但近年来已经显示出更多好主意.

我正在寻找比以下更不明显的东西.

• HR用CSS 替换HTML border,用于分隔已经是DIV的部分.
• 对于非"内容"的图形,IMG用CSS 替换HTML background-image.
• 用CSS替换HTML文本:before,并content为文本,是不是"内容".

我不是在寻找涉及添加JavaScript或更多HTML的技术,例如其他DIV元素.

只有在说出哪些技术时,才能在特定浏览器和版本中使用的技术是可以的.

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

至

ul#mylist li { }

并且HTML会少一些.

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

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 */
}
?