具有 id 和类的 CSS 组织

Question

您认为组织网站 CSS 的最佳方式是什么？

我希望 ID 后跟类。然而，它们不是排他性的。

例子:

h4 {
    padding: 5px 5px 5px 10px;  
    font-size: 110%;
    font-weight: bold;
    color: #000000;
    font-family: Arial,  Helvetica, sans-serif;
    margin: 0px 0px 5px 0px;
    background:transparent url(/images/example2.jpg) no-repeat scroll left top;
    text-transform: uppercase;
}
#rightcol {
    padding: 0px;
    width: 306px;
    overflow: hidden;
    float: left;
    margin: 0;
    border: 0;
}
#rightcol .container {
    margin: 5px 6px 0 0;
    padding: 5px 5px 0 5px;
    background: #FFFFFF;
}
#box_info {
   border: 1px solid #AAAAAA;
   background: #4F4F4F;
   line-height: normal;
   background: #4F4F4F url("../images/example.gif") repeat-x top left;
}
#box_info.container {
    margin: 10px 5px 10px 10px;
    background: transparent;
    padding: 0;
}

如果在 id 右导航中有一个 id 信息框，信息框的容器将有正确的导航!

<div id="rightnav">
    <div class="advert">
      This needs to be here as sometimes I need it without borders margins etc.
    </div>
    <div class="container">
        <div id="otherbox">
            <div class="container">
            </div>
        </div>
        <div id="info_box">
            <h4>Related Info</h4>
            <div class="container">
                <span>Info in here</span>
            </div>
        </div>
        <div id="yetanotherbox">
            <div class="container">
            </div>
        </div>
    </div>
</div>

所以我的问题是:是否有办法让它们成为独占(或者私有(private)，如果这是一个更好的术语)或更好的组织 CSS 的方式。

提前干杯。

编辑:只是想让你知道，我喜欢把容器放进去，原因很简单，就是宽度的原因。我想要 100% 的宽度，但我也想缩进我的容器。我发现在盒子中添加填充，然后在容器中添加边距，我得到了我想要的。如果你能告诉我如何只用一个 div 来做到这一点，那就继续吧，尽管我只是想要一种更好地组织 CSS 的方法，而不是 html(因为我相信我已经尽力了，但请尝试证明我错了:))。谢谢:)

Answer 1

我认为 Natalie Downe 拥有正确的 CSS 组织方法，她在此处的 CSS Systems 演示文稿中对此进行了详细说明:

http://natbat.net/2008/Sep/28/css-systems/

我们的想法是，您在几个 block 中从更一般的转移到更具体的:

1. 一般风格
   • 列表项
   • 体型
   • 重置
   • 链接
   • 标题
   • 其他元素、标签
2. 辅助样式
   • 表格
   • 通知和错误
   • 通常只有一个类的一致元素
3. 页面结构
   • 骨架，包括页面家具
4. 页面组件
   • 你的大部分风格都在这里
5. 覆盖
   • 尽可能少的去这里