1

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

           <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 的好处，但我需要很好的控制。

4

4 回答 4

4

您的代码遭受了严重的 div-itis 的困扰。我首先会为标题、段落等使用适当的标签。一旦你有一个正确标记的文档，你可以为公共元素添加类，然后根据需要对这些类进行样式设置。您会发现某些类型的元素无论在哪里都共享一种样式，因此您可以最大限度地减少内联样式的数量。

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

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

于 2009-01-21T07:43:52.287 回答
1

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

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

然后你应该把你的填充到样式表中。如果您要恢复设计元素的内联样式，那么您就没有正确考虑语义。一旦你在那里有了你的类，你可以使用 Web Developer 等快速、轻松地编辑你的样式表。

于 2009-01-21T12:10:57.177 回答
0

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

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }
于 2009-01-21T07:37:42.347 回答
0

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

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

于 2009-01-21T08:51:06.830 回答