尽量减少使用明确的填充的风格属性

StackOverflow https://stackoverflow.com/questions/464339

  •  19-08-2019
  •  | 
  •  

题

我发现我写了很多的代码看起来是这样的：

           <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，但是我需要的现行控制。

有帮助吗？

解决方案

你的代码遭受严重的情况下div炎.我将首先开始通过使用适当的标签标题，段落，等等。一旦你已经适当标记的文件，可以添加类的共同要素，那么风格的那些类作为必要的。你会发现，某些类型的元素分享的风格不论他们在哪里，所以你可以最大限度地减少量的内联型。

你的课程应当反映属性的要素(例如"标题").在一般情况下，课程应该不是指一个特定的设计的执行。HTML是"什么"，CSS是'如何'。当你使用CSS类表示的设计细节，你们注射到你HTML。

(是的，有时这些规则需要被打破。但那些是例外。)

其他提示

每个这些div的将有一个目的。他们正在被区别对待的理由。查找并给这些div反映内容的名称。

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

然后你应该把你的填充到样式表。如果你恢复到内嵌样式设计元素那么你就无法通过正常思维的语义。一旦你在那里，你的课程，你可以使用Web开发等快速，轻松地编辑样式表。

您可以有一个一般的规则，并在特定情况下的ID规则的重写，如果需要的：

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

通常，第一和在容器中的最后一个元素需要特殊的处理。看起来这是你的榜样的情况。

在第一胎和最后一子选择不能跨浏览器非常可靠的，但（因为IE6的居多），这样你就可以手动添加类的第一和最后一个元素或使用JavaScript代码来帮助你 - 后代执行此很好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top