有时我们尝试用尽可能少的行来编写CSS样式表。
让我们看看这个例子:
注:原为borders，其中所有width:1px, border-style:solid和border-color:#000
场景:我们想修改:
- R、L、B的
width与0px - : T到
#ddd的border-color
代码:
border:0 solid #ddd;
border-top-width:1px;
上面的代码做了哪些不必要的事情?:
- 改变:R, L和B的
border-color(3个动作) - 改变:T (1 action)的
width
下面是0个不必要操作的代码:
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;
如果有的话，效率损失将无法测量。
最好写出可读性好的代码。
最后你的第一个例子的文件大小更小，所以下载CSS更快。
我们应该为了更少的代码/可读性而牺牲效率吗?
是的!如果你想要效率，压缩你的代码，但总是有一个完全可读的、易于修改的、清晰的、切中要点的源代码版本。
通常最好使用零内联样式。如果它只是一个元素，给它一个id，并把它的样式放在你的CSS文件中。
在我看来，重写CSS是CSS的一部分。
至于效率，我认为你不会注意到两者之间有什么可测量的差异(下载时间除外)。
重要的是是一致的，并使你的代码可读。 至于你的例子，我会这样做: 只是因为我觉得这样更容易读border:none;
border-top:1px solid #ddd;
我想你问错问题了。您提供的示例不会导致下载时间或呈现页面所需的时间有太大差异。我认为任何web开发人员的主要关注点应该是使代码易于阅读，至少他们自己，最好是别人。
我会这样做:
border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;
它很短，并不是很神秘的显示是什么样子，没有做任何不必要的事情。
至于压缩:不确定作者是什么意思，但如果你缩小代码，另一端的浏览器不会像我们想要的那样"取消缩小"它。无论如何，空格都会被忽略，如果不存在，甚至可能会加快解析速度…