Question

我发现我正在编写大量看起来像这样的代码：

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

这就是说我会使用大量明确的填充或边距。

我想知道更好的方法是什么，而不是像这样的类名：

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

当我编码这样的实际内容而不是更通用的整体布局时，我倾向于发现特定的填充大小更合适。我会发现自己从8px变为11px然后再变回9px。它一定是我的设计师，但我真的不喜欢我正在形成的习惯。

我不认为自己能够重新审视一个全球规则，即“中等填充”为9px并将其更改为11px并期望获得满意的结果。它可能会使一些页面看起来更好，并使其他页面毁了。

其他人怎么做才能解决这个问题？我想要css的好处，但我需要很好的控制。

Answer 1

您的代码遭遇严重的div-itis案件。我首先要使用标题，段落等适当的标签。一旦你有一个正确标记的文档，你可以添加常用元素的类，然后根据需要设置这些类的样式。您会发现某些类型的元素无论它们在何处都共享一种风格，因此您可以最小化内联样式的数量。

您的类应该反映元素的属性（例如“标题”）。通常，类不应该引用特定的设计实现。 HTML是'什么'，CSS是'如何'。当您使用表示设计细节的CSS类时，您将把注释方式注入HTML。

（是的，有时需要打破这些规则。但这些都是例外。）

Answer 2

每个div都有一个目的。他们受到不同待遇的原因。找到并给这些div一个反映内容的名称。

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

然后你应该把你的填充放入样式表。如果你正在恢复设计元素的内联样式，那么你就不会正确地思考语义。一旦你上课，你就可以使用Web Developer等快速轻松地编辑你的样式表。

Answer 3

如果需要，您可以拥有一般规则并在特定情况下使用id规则覆盖它：

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

Answer 4

容器中的第一个和最后一个元素通常需要特殊处理。在您的示例中看起来就是这种情况。

第一个孩子和最后一个孩子的选择器在浏览器中不是很可靠（主要是因为IE6），所以你可以手动为第一个和最后一个元素添加类，或者使用一些javascript来帮助你 - Offspring做得很好。

最小化使用显式填充样式属性

4 个答案: