21

最好的做法是在外部 CSS 文件中包含所有样式，以利用缓存、标记和设计的分离、更好的概览等。

但是，我通常会遇到这样的问题，即元素应该看起来相同，即具有相同的类，但位置需要不同，例如，由于成分差异需要不同的边距或填充。

我想到了三个选择：

选项 1：从位置样式（边距/填充）中拆分外观样式，将它们放在单独的类中并根据需要组合它们。

.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }

选项 2：复制类，相应地重命名它们并将每个差异保留在自己的类中。

.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }

选项 3：使用内联样式声明不同的边距/填充。

<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">

有

.myClass { ...; margin: 10px 0px; }

我的常识告诉我根据父/子结构使用选项 1 和级联差异。但这通常会导致相当混乱，尤其是对于其他阅读 CSS 的开发人员而言。所以我尝试了选项 3（只有几个外部边距/填充），这似乎工作得很好。

我仍然以某种奇怪的方式为此感到难过。有很多人告诉不要使用内联样式。通常我会说“最好的”，但最近我意识到内联边距/填充可能会影响网站的渲染过程，导致“跳舞块”。我不确定这种效果是否真的是由样式的处理顺序引起的，或者是其他一些令人讨厌的事情，我猜。

有什么建议吗？

4

4 回答 4

7

我个人的偏好是有“间隔课程”，可以这么说。例如：

.default-row-spacer{
    margin-bottom:10px;
}
.default-spacer{
    margin-right:10px;
}
.large-row-spacer{
    margin-bottom:20px;
}

然后我像这样使用它们：

<div class="panel default-spacer default-row-spacer">
    <div class="content default-row-spacer">
    </div>
    <div class="content default-row-spacer">
    </div>
</div>
<div class="right-panel default-row-spacer">
</div>

这允许我稍后更改网站的所有边距，在整个网站上保持相同的外观和感觉。

于 2013-04-27T12:54:40.713 回答
2

这很大程度上取决于你的问题，

当您必须经常这样做并且值没有太大差异时，或者您可以将其关闭到“前 10 位边距”时，制作额外的课程可能会很有用，例如

.tTwenty { margin-top:20px;}
.bTwenty {margin-bottom:20px;}

并像这样添加它们

<div class="myClass tTwenty">
<div class="myClass">
<div class="myClass bTwenty">

但是你所有的解决方案都会起作用，只是照顾它的区别，但你不应该开始使用内联样式，因为你已经习惯了它们，你开始用内联css修复每一个小东西，然后它得到毛茸茸的，因为当你在一年内看到这个时，你必须混合外部 css 和你的内联来理解样式，并且你需要使用内联样式来接触每个文档，而不是修复你的 css 文件中的所有内容

于 2013-04-27T12:54:28.780 回答
1

这是我在开发电子商务网站时遇到的一个问题，其中几乎所有内容都是动态生成的。由于大多数内容块重复了不止一次，因此我无法对它们进行相同的样式设置，因为我想以不同的方式设置不同的块样式 - 类似于您所注意到的。

我最终做的是使用 Chrome 的 Inspect Element 来准确找出 div 和类的层次结构，并最终做了这样的事情：

选项 4：

.myClass { ...; }
.thumbnail .myClass { margin-top: 20px; }
div.leftCol .myClass { margin: 10px 0px; }
footer .myClass { margin-bottom: 20px; }

在我看来，这个选项的好处是不仅能够获得选项 1 的所有好处，而且您不必添加新的类，并且您的CSS 仍然非常结构化和可读。

于 2013-04-27T12:59:13.053 回答
0

经验法则是：如果需要重复执行……就像列出某事的评论一样。并且每一个都有出现的body，标题下40px，使用css类。如果它是一次性的。只有一个对象，比如说......使用内联

于 2013-04-27T12:51:26.353 回答