Question

我想知道如果您这样编码，浏览器的性能会有差异：

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

<div class="css-everything">

如果你把所有内容放在.css-everything中，而不是部分css类，那么加载网站会更快？

Answer 1

对于你所陈述的条件， perspective 的唯一问题。没什么。

<强>实施例：

请考虑您有以下情况：

<强>场景：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

对不起，我需要一段时间后才能回来并稍后再编辑。

提高加载css的速度

1 个答案: