在CSS中覆盖样式是不是很糟糕?

时间:2011-12-18 21:38:33

标签: css performance

有时我们尝试用尽可能少的行来编写CSS样式表。

让我们看一下这个例子:

注意:以前borders所有width:1pxborder-style:solidborder-color:#000


情境: 我们想改变:

  • width:R,L和B到0px
  • border-color:T到#ddd

使用的代码:

border:0 solid #ddd;
border-top-width:1px;

上面的代码不必要地做了什么?:

  • 更改:{R,L和B的border-color(3个操作)
  • 更改width:T(1动作)

以下是包含0个不必要操作的代码:

border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;

问题是:我们是否应该牺牲效率以降低代码/可读性?

5 个答案:

答案 0 :(得分:6)

效率损失将无法衡量,如果有的话。

编写好的可读代码总是更好。

最后你的第一个例子的文件大小更少,所以下载CSS更快。

答案 1 :(得分:1)

  

我们是否应该牺牲效率以降低代码/可读性?

是的!如果您想要效率compress your code,但始终具有完全可读,易于修改,清晰且适用的源版本。


通常最好有内联样式。如果它只是一个元素,请给它一个 id 并将它的样式放在CSS文件中。

答案 2 :(得分:1)

在我看来,重写CSS是CSS 的一部分。

至于效率,我认为你不会注意到两者之间存在可衡量的差异(下载时间除外)。

重要的是保持一致,并使您的代码可读。

至于你的例子,我会做的:

border:none;
border-top:1px solid #ddd;

仅仅因为我觉得它更具可读性

答案 3 :(得分:1)

我认为你问的是错误的问题。您提供的示例在下载时间或呈现页面所需的时间之间不会产生太大差异。我认为任何网络开发人员的主要关注点应该是使代码至少可以自己轻松阅读,最好是其他人。

我会这样做的:

border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;

它很短,并且对于显示器的样子并不是非常神秘,并且没有做任何不必要的事情。

答案 4 :(得分:0)

至于压缩:不确定作者的意思,但如果你缩小代码,另一端的浏览器将不会“取消”它以便像我们想要的那样阅读它。无论如何,空的空间都会被忽略,如果不存在,那甚至可能加速解析......