CSSが多すぎるとWebサイトのパフォーマンスに影響しますか？

Question

私はこのトピックについて研究しており、私は必要な正確な答えを見つけることができませんでした。

たとえば、私は境界線を必要とする非常に多くのdivがあります。

.border{ 

    border: solid; 
    border-color: #C6C6C6; 
    border-radius: 5px; 

} 

のような別々のCSSクラスを作成し、境界線を必要とするすべてのdivタグで使用できます。または、私が含めることができる

 border: solid; 
     border-color: #C6C6C6; 
     border-radius: 5px; 

私はdivsのために書いているすべてのCSSクラスにプロパティ。

境界線のための別のクラスを作成し、それを使用することによって、私のCSSファイルの行の巨大な塊を減らします。しかし、私の問題は、私は私のdivのために書くすべてのCSSクラスに境界プロパティを含める場合、それはWebアプリケーションのパフォーマンスに影響を与えるかどうかです。

ありがとうございます。

Answer 1

これは非常にロードされた質問である公平を期すために...

私はあなたが認識していますが、CSSはカスケーディングスタイルシートの略であれば、それはダウンシートからHTMLタグへの「カスケード」に建設されたか分かりません。だから、短い答えはいいえ、今日のインターネット接続では、おそらくそうではありません。 CSSを使用してパフォーマンスを節約するための最良の方法は、それが縮小化」です - しかし、ここで考慮すべきいくつかのことは、CSSにを縮小化）...

1です。これを行うことができる多くのオンライン発電機がhttps://cssminifier.com/のようにあります。これにより、文書内で不必要にkbを占める文字（スペースや改行など）が削除されます。

2）ユーザーエクスペリエンス - 米国や英国などの国における ユーザーは、ほとんどの部分は高速ブロードバンドへのアクセス権を持っていますが、あなたは見つけることができますいくつかの非常に非常に古い接続上のことを考慮する必要があります各タグからそのルールを再描画しなければならない場合は、時間がかかることがあります。

3）読みやすさとデバッグ - 後で戻っTOT帽子コードを来て、あなたが境界線の色を変更することを決定する必要がある場合は、あなたが適用されるそれぞれ、すべてのタグにそれをしなければならないためにやっています1つのスタイルシート上の1つの単純な変更とは対照的に、変更されています。また、ブラウザ内の開発ツールを使用してこれをデバッグしようとすると、これは多くのタブの代わりに1つのルールで1つの値を検索するだけで複雑になります。

4）カスケード効果 - 最後に、これは完全にHTMLヘッダに（スタイル宣言に、そのスタイルはルールから下トリクルとしてそもそもCSSモデルの点を挑む ）は、タグ付けしました両方のドキュメントを読みやすく、編集しやすいものにします。

要するに、パフォーマンスの利点はありますが、古い接続でない限り顕著ではありませんが、他の開発領域の利点は単なる読み込み速度だけではありません。

Answer 2

答えははいです！ベストプラクティスはジェネリッククラスを持つことです。

CSSの方法に関するドキュメント：http://codetheory.in/an-overview-of-oocss-bem-smacss/

OOCSS、BEM、SMACSSは、あなたのCSSを整理する良い方法です。

Answer 3

CSSコードをあまりにも多く書くと、CSSファイルのサイズが大きくなる可能性があります。クラスを作成して重複したコード行を避けることができれば、それを行ってください。コードの重複を避けることがベストプラクティスです。変更が必要な場合は、1行のコードを変更する必要がある場合、すべての場所が反映されます。 重複したコードを避けることができれば。そして、CSSファイルを小さくして結果ページの読み込み時間を改善できるように、CSSを本番ウェブサイト用に縮小します。