css - 为什么 css 手写等效有用

Question

我一直在寻找一个 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 <=7、chrome、ff、safari 2 版本低于当前版本)

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

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

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

Answer 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