Css表现！更多重复或独特

Question

在大型项目中...

哪个更快且优化？

浏览器和流量哪个更好？

*1.

.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
width:44%;
float:left
}

.class1{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:44%;
float:left
}

*3.

.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
}
.class1{
width:34%;
float:right;
}
.class2{
width:44%;
float:left;
}

*@connexo 建议的新更新。

Sepas 你的时间！

Answer 1

我不确定问题是否正确。在 CSS 的情况下，我会问维护它有多容易。当你在更大的网站上工作时，更新 1 条样式声明比更新 10 条声明要好。如果您确定 class1 和 class 2 的行为将始终相同，我会选择第一个示例。以后会更容易找到确切需要更新的内容。

这两个例子都不会显着影响性能，而且，它们与 SEO 无关（据我所知）。

我希望这能回答问题...

Answer 2

我就是这样做的。将所有类共享的属性放在一个块中，然后单独定义偏离的属性。

.class1, 
.class2 {
    line-height: 40px;
    margin-left: 4%;
    text-align: left;
}
.class1 {
    float: right;
    width: 34%;
}
.class2 {
    float: left;
    width: 44%;
}

除了结构性的东西外，我建议按字母顺序对声明进行排序，并且不要省略块中最后一个声明后的分号。

Answer 3

有几点需要注意：

1.使用简写
这将减少不必要的使用 space。 --> 优化了流量

2。精简代码
与 1 相同。

3。拆分您的 CSS - 代码（首屏关键 CSS）
这是优化页面速度的非常有效的方法。您可以将用户可以看到的第一个视图的代码放在页面的顶部，其余的放在底部。然后浏览器可以呈现页面，而无需完全下载页面。

4.使用内联 CSS
这不是最漂亮的解决方案，但它会影响性能。但是不要把你所有的 CSS 写成内联，只写一些小部分。

Css表现！更多重复或独特

Css performance! more duplicate or unique

css

performance

class

browser

traffic