Question

最佳做法是将所有样式放在外部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（只有几个外部边距/填充），这看起来效果很好。

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

有任何建议吗？

Answer 1

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

.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>

这允许我稍后更改网站边距的所有，在我的网站中保持相同的外观。

Answer 2

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

当你必须非常频繁地做这个并且值不是太大或者你可以把它关闭到“前10个边缘”时，制作像

这样的额外类可能是有用的。

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

并将其添加为

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

但是你的所有解决方案都能正常工作，这只是照顾它的不同之处但你不应该开始使用内联样式，因为你得到了它们并且你开始使用inline-css修复每一个小东西，然后它变得毛茸茸，因为当你在一年中看到它时你必须混淆外部css以及您理解样式的内联，您需要使用内联样式触摸每个文档而不是修复css文件中的所有内容

Answer 3

经验法则是：如果它需要重复完成......就像一个说评论的东西列表。并且每个人都有出现的身体，标题下40px，使用css类。如果它是一次性的事情。只有一个对象，比如说......使用内联

Answer 4

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

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

选项4：

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

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

边距/填充是否可以作为内联CSS？

4 个答案: