为什么 css 速记等效有用答案

【问题标题】：why is css longhand equivalent usefull为什么 css 速记等效有用
【发布时间】：2014-08-09 05:23:54
【问题描述】：

我正在寻找一个 grunt 工具来解析我的 css 并告诉我何时可以将普通 css 属性转换为速记。我认为这会使 css 更小，更容易理解。

所以基本上如果它会找到

.mydiv{
  background-color: #000;
  background-image: url(images/bg.gif);
  background-repeat: no-repeat;
  background-position: top right;
  font-style: italic;
  font-weight: bold;
  font-size: .8em;
  line-height: 1.2;
  font-family: Arial, sans-serif;
}

它会变成：

.mydiv{
  background: #000 url(images/bg.gif) no-repeat top right;
  font: italic bold .8em/1.2 Arial, sans-serif;
}

令我惊讶的是，我找不到这样的插件，但另一方面，我发现了很多将速记属性转换为速记的插件。这就提出了一个问题：

为什么人们想要将他们漂亮而干净的速记等价物转换为速记？除了以下之外还有什么正当理由：

我喜欢更长的时间
一些真正过时的浏览器，如 IE 7 搞砸了一些东西。（过时的意思是 IE

P.S. 另外我不是要 grunt 插件，如果有人知道，请告诉我。

P.P.S 我看到了this question，这个人关心的是：性能和文档。我不关心这些事情，因为：我团队中的人可以阅读和理解速记并且更喜欢它，而且我知道在性能方面（对于解析规则）它产生的差异非常小（如果有的话）并且在带宽的情况下它更小。

我担心的是，我可能会在某些浏览器中得到不同的表示。

【问题讨论】：

css shorthand vs longhand?的可能重复
@joe 我不认为这是重复的。我添加了一个有问题的解释来支持我的想法。
我认为这要么是重复的，要么是完全偏离主题的，因为它基本上是一个讨论问题。
@Joe 无法理解它怎么会跑题。基本上我要问的是：我可以用速记属性打破什么。这不是一个讨论、开放式、偏好问题。我想看看如果我使用这条短规则而不是这条长规则，我的前端就会搞砸了。
@SalvadorDali 也许你会对csso感兴趣。

标签： css gruntjs shorthand

【解决方案1】：

有时是必要的，因此您可以更好地控制您的样式，以便您可以在典型案例之外创建东西。

考虑这个长手边框语法的例子：

section{
  max-width: 60em;
  margin: 0 auto;
}
p {
  border-color: black;
  border-style: solid;
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
}

这会创建一个与平常截然不同的边框。单凭短手是没有办法完成这么简洁的方法的。

演示：http://codepen.io/agconti/pen/sixaL

【讨论】：

当对象 css 选择器发生变化（:hover,:active 等）时需要更改单件时，长指针也很有帮助。