css - 提高加载 css 的速度

Question

我想知道如果您编写这样的代码，浏览器的性能是否会有所不同：

<div class="css-1 css-2 css-3 css-4 css-5">

<div class="css-everything">

如果将所有内容都放在 .css-everything 中，而不是部分 css 类，加载站点会更快吗？

Answer 1

正如你所说的那样，它唯一的观点问题。没有其他的。

例子：

考虑你有这样的场景：

场景：1

CSS：

.button {
    width:100px;
    border-radius: 5px;
}
.blueBG {
    background-color: blue;
}
.redBG {
    background-color: red;
}
.left{
    float: left;
    margin-left: 10px;
}
.right {
    float: right;
    margin-right: 10px;
}

HTML：

<a href="stackoverflow.com" class="button red left">StackOverflow</a>
<p class="blue">Text with blue background</p>
<img class="left" src="image.jpg"></img>

现在想想，如果我在这里使用这样的代码：

CSS：

.blueButtonLeft {
    width:100px;
    border-radius: 5px;
    background-color: blue;
    float: left;
    margin-left: 10px;
}
.blueButtonRight {
    width:100px;
    border-radius: 5px;
    background-color: blue;
    float: right;
    margin-right: 10px;
 }
 .redButtonLeft {
    width:100px;
    border-radius: 5px;
    background-color: red;
    float: left;
    margin-left: 10px;
}
.redButtonRight {
    width:100px;
    border-radius: 5px;
    background-color: red;
    float: right;
    margin-right: 10px;
 }  

HTML：

<a href="stackoverflow.com" class="blueButtonLeft">StackOverflow</a>
<!-- Need of defferent code for img and p -->

我希望区别很明显。不是吗？

场景：2

很抱歉，我需要离开一段时间，以后肯定会回来并对其进行更多编辑。