bootstrapで用意されたclassは多用してもいい？

Question

質問内容

bootstrapを使ってウェブサイト制作の学習を行っています。
質問なのですが、bootstrap側で用意されているクラス(position-relativeやp-3、text-centerなど)を使えるだけ使うやり方は結果としてサイトを重くしますか？

例えば下記のコードのように個別でp-4をhtml内に記述するのと、cssに li a { padding: 1.5rem }と記述するやり方では差が出ますか？

実現したいこと

・なるだけ軽くしたい

ソースコード例

<li>
  <a class="p-4">
    ~~~~~~~~
  </a>
</li>
<li>
  <a class="p-4">
    ~~~~~~~~
  </a>
</li>
<li>
  <a class="p-4">
    ~~~~~~~~
  </a>
</li>

Answer 1

差が出ますか？という質問に純粋に答えるなら差は出ます。
ただし、今回の例であれば結果としてはごく微小な差になると思います。

bootstrapを使う方が重くなる

これは、bootstrapを導入する理由が、今回の実装に対してのみな場合です。
他の場所でbootstrapを使用しておらず新規で導入した場合は、サイト全体のファイルサイズに対しても、ブラウザによるスタイルの計算に対しても重くなる方向に作用します。
おそらく今回は既に導入してあると思いますので、こちらは当てはまりません。

bootstrapを使わないほうが重くなる

CSSセレクタの記述によってブラウザによるスタイルの計算パフォーマンスは変わります。
li aよりも.p-4のほうがパフォーマンスは高いです。

結論

最初に書いた通り、状況によってパフォーマンスはごく微小に変わります。
しかし、他の回答者様の通りbootstrapを使用した方が開発や保守の面でメリットが大きいと思いますので、bootstrapのクラスで指定することをおすすめします。
少なくとも既にbootstrapを導入している状態で、p-4のようにクラスの指定を多用してもデメリットは（おそらく）無いと思います。

Answer 2

例えば下記のコードのように個別でp-4をhtml内に記述するのと、cssに li a { padding: 1.5rem }と記述するやり方では差が出ますか？

後者のやり方だと、サイト全体に影響してしまいます。ごく小さなWebページ1枚、のような環境でない限り、影響範囲が広くなりすぎてほぼ実用できません。

Comments

[kuriso]

回答ありがとうございます。
不適で分かりづらいソース例ですみません。質問として聞きたかったのは、上記コードのような「cssを新たに記述しない代わりにその都度bootstrap.cssから引っ張ってくるやり方」と「htmlはスッキリしてるが自作css側の記述は増えるやり方」の場合、完成品の重さに差は出るのか？と言った感じです。

[maisumakun]

もとの回答の通り、「そもそも後者のやり方でサイトを作ることが現実的でない」（ので重さを比較する以前の問題）というのが回答です。

Bootstrapを使うようなスケールのあるサイトで、HTMLサイドに何も書かずにCSSだけでスタイルを当てる位置を決めるのは、少しHTMLを書き換えたことでスタイルの適用具合が変わるなど、実装として不安定となるため、現実的なサイト構築の選択肢とならないのです。

逆に、「全部同じスタイルでいい」ようなシンプルなサイトには、Bootstrapを使うのが過剰装備となってしまうので、やはり同じ土俵で比較する機会は来ません。

[kuriso]

私の低い知能では自分の言いたいことは伝えられないしあなたの言いたいことも伝わらないのでもう大丈夫です。ありがとうございました。

[m.ts10806]

質問者さんが低評価されたのでしょうか。でしたら、低評価理由が「自分が理解できないから」というのは不純だと思うのと、当回答が回答者のコメントもあわせて有用と判断したので高評価しています。
※それに質問者さんがベストアンサーに選んだ回答をされた方もこの回答には同意されていますよね。

自身が言いたいことが伝わってないと思うなら、質問内容を納得いくまで編集して、きちんとアドバイス得られる方向にもっていくだけだと思います。
回答者の言うことが理解できないなら理解できるまで質問して身に着けることで今後絶対に活きると思います。
「気に入らないから」だけで低評価してるのと同じなので、嫌がらせ目的にもなります。

[k_a]

低評価は私です。コメントを残すのを失念していました。
私は内容には同意しましたが、回答としては不適当だと思います。
別の情報として正しいだけで、質問の回答にはなっていません。

[maisumakun]

> 別の情報として正しいだけで、質問の回答にはなっていません。

質問には（明示的にせよ暗黙的にせよ）前提がありますが、その前提が間違っている場合は質問に沿って無理やり回答するより、前提の間違いを指摘するほうが適当だと考えています。

今回の場合、「どちらの方法でもサイトを作るのに支障しない」というのが暗黙の前提となっていますが、到底そういう状況ではない（まともに完成させられなければパフォーマンスを比較する以前の問題となる）と判断して、この回答をしています。

[k_a]

その考えは正しいと思いますし、業務で質問した場合にそのような指導は非常にありがたいです。
ただし、先に記述した通り「質問の回答」としては間違っています。

後者のやり方は影響範囲が大きすぎて実用的でないという回答は結果的に質問者様のためにはなりますが、直接疑問を感じていることの解消にはつながっていません。

「完成品の重さに差は出るのか」に対して一言でも言及した上で、該当の指摘をするのであれば良い回答だと思います。

[maisumakun]

> 直接疑問を感じていることの解消にはつながっていません。

抱いた疑問そのものが適切でない、という話です。

あくまで重箱の隅をつつくような、仕様書の細かい部分を掘り下げるような質問であれば別ですが、そうでない質問は、最終的には「結果物」を得る方向へと進んでいくものです。

最終的なプロダクトを得るために支障することとなるようなやり方は、たとえ質問の直接のスコープ外であってもそちらへ向かわないように指摘するかたちにするのが妥当だと考えています。