2011-12-18 116 views
4

有时我们尝试用尽可能少的行编写CSS样式表。覆盖CSS中的样式不好吗?

让我们看看这个例子:

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


情景: 我们希望改变:

  • width:R,L和B 0px
  • border-color:吨至#ddd

代码中使用:

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

什么做的上面的代码做了不必要的事情吗?:

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

这里是0不必要的代码动作:

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

问题是:我们应该牺牲代码/可读性较低的效率吗?

+2

好吧,要成为CSS,效率并不是什么大问题:下载CSS文件需要更多的时间(除非您使用Internet Explorer) – JCOC611 2011-12-18 21:41:29

+1

您是否测量过任何性能差异? – greg0ire 2011-12-18 21:42:18

+0

@ greg0ire,我没有,我不知道如何测试 – ajax333221 2011-12-18 21:45:47

回答

6

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

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

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

1

我们应该牺牲效率来减少代码/可读性吗?

是的!如果你想效率,compress your code,但始终有一个完全可读,易于修改,清晰和到位的源版本。


,它通常最好有内嵌样式。如果它只是一个元素,给它一个ID,并把它的样式放在你的CSS文件中。

+0

我认为压缩代码会导致较少的“效率”,因为这意味着浏览器必须先进行更多的处理才能先解压缩代码。 – 2011-12-18 21:47:40

+0

@druciferre我不确定浏览器是否解压代码 – ajax333221 2011-12-18 21:53:30

+0

@druciferre,这取决于压缩方法。一些人喜欢传输时间,另一些人喜欢解析时间。这两者之间也有帮助。 – FakeRainBrigand 2011-12-18 21:53:53

1

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

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

什么是重要的是要是一致的,并使您的代码可读。

至于你的榜样,我会做:

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

很简单,因为我觉得这使得它更具可读性

+0

我不知道这样做的方式,它是有趣的 – ajax333221 2011-12-18 21:49:09

+0

说实话,当谈到CSS只是写出你在想什么“我想摆脱我的旧边界,但然后我想要一个顶部边框”,只是做到这一点......这是直到你意识到CSS需要吨嵌套的div来正确定位任何东西) – Tomas 2011-12-18 21:53:15

1

我想你问错了问题。您提供的示例在下载时间或呈现页面所需的时间之间不会产生太大差异。我认为任何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; 

它的短,不是很神秘,以显示是什么样的,并没有做任何多余的。

+1

我不知道短手可以应用于边界宽度,我想这是真的,“我们都每天都学到东西”:) – ajax333221 2011-12-19 02:11:03

0

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