Question

背景

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

margin: 2px; // Good

这会在元素的所有边上应用2px边距。您还可以在元素的不同边上应用不同的边距，如下所示：

margin: 2px 4px; // Good

这会在顶部和底部应用2px边距，在左侧和右侧应用4px边距。您可以使用相同的模式在所有方面指定相同的边距：

margin: 2px 2px; // Bad

但这很糟糕，因为你重复＆＃34;重复＆＃34;造型并使其不必要地复杂化。你可以使用上面的第一个例子，它更容易阅读，并且（应该）更加一致。

问题：

如果有的话，可以像第三个例子一样重复自己吗？

另外，下面的情况呢？

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

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

上述选项之一更好吗？每个人有什么利弊，如果有的话？

我一直在使用第一个选项，因为在同一个选择器中设置属性（margin-right）似乎是糟糕的风格。我发现第二个对我来说稍微容易理解，因为它看起来像＃34;除了右边之外的所有地方都应用2px，这是8px＆＃34;而不是＆＃34;应用2px top，8px right，2px bottom，2px left＆＃34;。

Answer 1

我觉得这个问题确实是主观的，你可能会从不同的人那里得到不同的答案。但是，我确实想提出“正确”的答案是Sass或另一个CSS生成器。在那里，您可以生成像

这样的代码

$myMarginPlain: 2px
$myMarginSpecial: 8px

margin: $myMarginPlain $myMarginSpecial $myMarginPlain $myMarginPlain

为您提供两全其美的体验;所有保证金规则现在都在同一行，没有覆盖，但更改价值只需要在一个地方进行更改。

对于原始CSS，我更喜欢第一个选项，原因与您所说的相同（在阅读单行后您已完全理解margin），但由于这两个选项在功能上都相同，因此很难强行争辩一个人。

Answer 2

这很可能是像@JustinWood这样的个人偏好所说的，但是对于你的CSS更具“特定性”还有一些优点。

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

例如，通过以下方式获得正确的边距更容易和跨浏览器兼容：

$('#id').css('margin-right')。

说实话，我甚至不确定如何使用css()方法获取CSS的特定速记值。我必须引用计算样式，这比简单地使我的CSS更精细更难。

根据Jquery API，“检索速记CSS属性（例如，边距，背景，边框），虽然可以使用某些浏览器，但不能保证。”

来源：http://api.jquery.com/css/#entry-longdesc

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

2 个答案: