css - cssの読み込み速度の向上

Question

次のようにコーディングすると、ブラウザによってパフォーマンスに違いがあるのではないかと思います。

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

<div class="css-everything">

部分的な CSS クラスではなく、すべてを .css-everything に入れると、サイトの読み込みが速くなりますか?

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

申し訳ありませんが、いつか戻って編集する必要があります。