1

下面哪一个代码片段会表现得更好？

第一个案例

.a {
	color: #000;
	width: 20px;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
}
.b {
	color: #333;
	width: 40px;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
}
.c {
	color: #999;
	width: 90px;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

第二种情况

.a {
	color: #000;
	width: 20px;
}
.b {
	color: #333;
	width: 40px;
}
.c {
	color: #999;
	width: 90px;
}
.smooth {
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
}
<div class="a smooth"></div>
<div class="b smooth"></div>
<div class="c smooth"></div>

在第一种情况下，所有 div 都使用相同的样式，而在其他情况下，相同的样式被分组到一个类中，并且该类被添加到 div 中。

哪个会表现更好？

4

1 回答 1

2

就性能而言，差异并不显着，但建议练习所谓的 DRY CSS。

如果我没记错的话，DRY CSS 是Jeremy Clarke大约 4 年前创造的一个术语。DRY 的意思是“不要重复自己”，因此应该首选您的第二种解决方案。

Harry Roberts (csswizardry.com) 解释了使用 DRY CSS 的两个最重要的原因：

  • 更少的实际代码，意味着更小的文件大小，更少的用户必须下载，更高效的代码等。
  • 更少需要维护；不重复自己意味着您可以对代码库进行更少的更改。
于 2016-08-03T10:52:49.997 回答