CSS性能！更多重复或独特答案

【问题标题】：Css performance! more duplicate or uniqueCSS性能！更多重复或独特
【发布时间】：2022-02-09 03:09:29
【问题描述】：

在大型项目中...

哪个更快和优化？

浏览器和流量哪个更好？

*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 建议的新更新。

为您节省时间！

【问题讨论】：

在您的第一个规则块中，您有两个 width 声明。

标签： css performance class browser traffic

【解决方案1】：

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

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

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

【讨论】：

分号是对的。我从不考虑你的模型，因为我认为它不是迷你的！但如果为浏览器执行，我会选择它。
反对其他人不是 Minify 但我们有 Gzip！所以最佳答案是 3。

【解决方案2】：

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

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

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

【讨论】：

我会选择第一个例子。这真的很容易。在处理网站上每个容器的大量样式时，很难找到需要更新的正确部分。像这样对它们进行分组肯定会有所帮助。
如果开发者很重要，你说得对，但现在流量和浏览器很重要。

【解决方案3】：

有几点需要注意：

1.使用速记
这将减少不必要的使用空间。 --> 优化流量

2。缩小代码
与 1 相同。

3.拆分你的 CSS - 代码（Critical Above the Fold CSS）
这是优化页面速度的一种非常有效的方法。您可以将用户可以看到的第一个视图的代码放在页面顶部，其余部分放在底部。然后浏览器可以渲染页面，而无需完全下载页面。

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

【讨论】：

我使用前 3 个选项。他们是关于流量的，但是浏览器呢？你知道 4 是怀旧。
3 最大程度地加快您的页面速度（以便您的 JavaScript 不会阻止该过程）。对于用户来说，页面感觉更灵敏。 4也可以提供帮助。它可以减少您的 css，因为您将它直接应用于元素。但你是对的，效果并不极端。