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>

所以我的问题是：有没有办法让它们成为独家（如果这是一个更好的术语，则是私有的）或更好的组织CSS的方式。

提前干杯。

编辑：只是为了让你知道，我喜欢把容器放进去，原因很简单。我想要100％的宽度，但我也想缩进我的容器。我发现在盒子里添加填充物然后在容器中添加边距我得到了我想要的东西。如果你只用一个div告诉我如何做到这一点，那么继续前进虽然我只是想要一种更好地组织CSS的方式，而不是html（因为我相信我做得最好它可以，但是要试一试我错了:)）。谢谢:)）

Answer 1

我认为Natalie Downe有正确的CSS组织方法，她在CSS Systems演示中详细说明了这一点：

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

这个想法是你在几个块中从更一般的移动到更具体的：

一般风格
- 列表项
- 体型
- 重置
- 链接
- 标题
- 其他元素，标签
帮手风格
- 表格
- 通知和错误
- 通常只有一个类的一致项目
页面结构
- 骨架包括页面家具
页面组件
- 你的大多数风格都在这里
覆盖
- 尽可能少地到这里

Answer 2

如果您想要应用#infobox .container样式，则必须使用“！important”规则覆盖#rightnav .container。如果您不希望名称之间发生任何冲突，只需更改#rightnav .mainContainer中的#rightnav .container即可。我希望我写的东西不那么明显。

Answer 3

我认为尝试按类和ID组织您的级联规则可能会被错过指导。你真的应该只考虑实际的级联，而不是试图让它们变得私密。

例如以下内容：

 #container
    {
        width: 600px;
        margin: auto;
    }
    #left
    {
        width: 250px;
        float: left;
    }
    #left p
    {
        color: Blue;
    }
    #left .information p
    {
        font: normal .83em sans-serif;
        color: #000000;
    }
    #right
    {
        width: 250px;
        float: right;
    }
    #right ul
    {
        font: normal .83em sans-serif;
        list-style: none;
    }

将显示：

alt text http://img188.imageshack.us/img188/1576/croppercapture5e.jpg

如您所见，页面本身没有字体。但是当您深入了解样式级联的级别时，您会发现paragaphs已定义样式，并且.information类在段落上定义了蓝色。通过考虑在深入了解HTML时需要哪些样式，您会发现实际上最终会得到更少的HTML和更有条理的样式表。

祝你好运，希望这会有所帮助。

Answer 4

级联样式表的一个属性是级联。应用于父元素的样式也适用于其子元素。要更改它，您必须通过显式重新设置它们来覆盖从父级继承的样式。

Answer 5

为了定位子容器你可以做#rightnav .container .container我认为。

带有ID和类的CSS组织

5 个答案: