代码可读性：如何为接受多个值的CSS属性指定样式

背景：

使用CSS为元素应用样式时，可以指定元素应具有的边距量（例如），如下所示：

margin: 2px; // Good

这将在元素的所有边上应用

2px

边距。也可以在元素的不同侧面应用不同的边距，如下所示：

margin: 2px 4px; // Good

这适用于顶部和底部的

2px

边距，以及左侧和右侧的

4px

边距。可以使用相同的图案在所有边上指定相同的边距：

margin: 2px 2px; // Bad

但这是不好的，因为您“重复”了样式，使其变得不必要的复杂。您可以使用上面的第一个示例，它更容易阅读并且（应该）更一致

问题：

什么时候可以像第三个例子那样重复你自己，如果有的话

还有，下面这样的案例呢

// Option 1
margin: 2px 8px 2px 2px;

// Option 2
margin: 2px;
margin-right: 8px;

以上选项之一更好吗？如果有的话，它们各有哪些优点和缺点

---

我一直在使用第一个选项，因为在同一个选择器中设置属性（

marginright

）似乎是一种糟糕的风格。不过，我觉得第二个问题对我来说更容易理解，因为它读起来像是“在任何地方应用2px，除了右边，这是8px”，而不是“应用2px顶部，8px右侧，2px底部，2px左侧”。

我觉得这个问题确实是主观的，你可能会从不同的人那里得到不同的答案。然而，我想指出的是，“正确”的答案是另一个CSS生成器。在那里，您可以生成如下代码

$myMarginPlain: 2px
$myMarginSpecial: 8px

margin: $myMarginPlain $myMarginSpecial $myMarginPlain $myMarginPlain

这给了你最好的两个世界；所有边距规则现在都在同一行中，没有覆盖，但更改值只需要在单个位置进行更改

---

至于原始CSS，我更喜欢第一个选项，原因与您所说的相同（阅读一行内容后，您对

margin

有了充分的理解），但由于这两个选项在功能上是等效的，因此很难对其中一个进行有力的论证。

这很可能是@JustinWood说的个人偏好，但是，在CSS中更加“具体”是有好处的

对我来说，我尝试尽可能地分解我的CSS属性，以使它们更容易用JS/jQuery定位

例如，使用以下方法更容易获得正确的边距，并且跨浏览器兼容：

$（'#id'）.css（'margin-right'）

老实说，我甚至不知道如何使用

CSS（）

方法获得特定的CSS速记值。我必须引用计算样式，这比简单地使CSS更细粒度要困难得多

根据jQueryAPI，“速记CSS属性（如边距、背景、边框）的检索虽然在某些浏览器中很有用，但不能保证。”

---

资料来源：

我认为这取决于个人喜好。我不能对表现发表任何评论，所以我只会发表评论。我有时也会在下一行部分覆盖一条规则——我看不出有什么理由不这样做。但是现在我想起来了，我意识到我通常是因为懒惰才这么做的<代码>边距：2px2px当然没有实际意义，只要有

边距：2px

并且它会产生相同的结果（事实就是如此）。两个相等的值只有在至少有第三个值时才有意义。否则一个就足够了。@JustinWood谢谢你的评论！如果只是个人喜好的话，我绝对同意。我只是在寻找一个原因，如果真的存在的话。很多事情都可以用不同的方式实现，但可能有一个原因就是它是以特定的方式实现的。我可能没有意识到这一点，因为我缺乏经验（也许有一种方法更容易出错），但原因就在那里，除非我问，否则没有办法知道。我宁愿问“为什么”而得到“没有理由”，也不愿做任何其他人正在做的事情而错过学习的机会