Web制作

CSSのフレームワークは使わない方が良い理由【ぶっちゃけ不便】

どうも、コーダーのなか(@nakafreelog)です。

この記事では、

「CSSのフレームワークって使う必要あるのかな、、、」

「これから学習しようか迷っているけど、やるべきなのかな、、、」

上記のような悩みを解決していきます。

というわけで、CSSのフレームワークを使う必要はあるのか?

先に結論から述べると、正直不便なので使う必要はないですね。

Bootstrapを代表とするCSSのフレームワークは実際にはあまり使われていませんし、「普通にCSS書いた方が良くね?」となる場面も多々あります。

というわけで。この記事ではそこら辺のことについて詳しく深掘りしていきますね。

では、記事に入っていきます(‘ω’)ノ

この記事の内容
  • CSSのフレームワークは使わない方が良い理由
  • CSSのフレームワークを使った方が良いとき
  • Bootstrapの考え方自体は参考になる

CSSのフレームワークは使わない方が良い理由


Bootstrapを代表とするCSSのフレームワークは実務ではあまり使われていませんし、実際使ってみると結構不便です。

理由としては3つほどあって以下の通り。

CSSのフレームワークは使わない方が良い理由
  • 独自のCSSが適用されてしまうから
  • どうしてもテンプレ感が出てしまうから
  • コードが見づらくなるから

というわけで、具体的に詳しく解説していきます。

独自のCSSが適用されてしまうから

Bootstrapを実際に使ってみて思ったことですが、独自のCSSが反映されてしまい、むしろデザイン通りにコーディングする難易度が上がってしまいます。

正直、最初からCSSのみで書いた方が早いかと。

フレームワークを使ったとしても、細かい調整は必要になってきますし、横並びやレスポンシブでの縦並びなどもFlexboxを使えば出来てしまうため、わざわざCSSのフレームワークを使う必要がないです。

また、CSSでコードを書いた方が修正時にも治しやすいので、長期的に考えた場合もフレームワーク不便ですね。

どうしてもテンプレ感が出てしまうから

フレームワークを使うと、ある程度「見れるレベルのデザイン」にはなります。

しかし、どうしてもテンプレ感と野暮ったさが出てしまうことは事実です。

65点くらいのサイトを作るとなったら便利かもしれませんが、80点から100点の品質でサイトを作ろうと考えた場合はむしろ足を引っ張る要素になってしまいます。

CSSのフレームワークを用いれば「最低限の品質」は担保されるのかもしれませんが、「お客さんが納得がいくサイトが作れるのか?」と言ったら、正直微妙なところがあるかと。

コードが見づらくなるから

CSSのフレームワークを使う際には、基本的にHTMLの要素に、あらかじめ定義されているクラスを書いていくことになるかと。

しかし、細かい指定をしようとすると何個もクラスを追加する必要が出てくるため、非常にコードが見づらくなります。

何個もクラスを付与すると修正を行う際に非常に大変ですし、可読性も低くなるため、あまりよろしくありません。

特別な事情が無い限りは進んで使う必要はないですね。

CSSのフレームワークを使った方が良いとき


とはいえ、CSSのフレームワークを使った方が良い場合もあって、具体的には以下の通り.

CSSのフレームワークを使った方が良いとき
  • CSSのフレームワークを用いて作られたサイトを修正するとき
  • フレームワークを使うこと前提にデザインされたサイトをコーディングするとき
  • 超高速で開発しなければならないとき
  • デザイン知識がないけど、ある程度見れるレベルのサイトを作りたいとき

上記のような事例でない場合は基本的には、あまり使わない方が良いと思います。

先述しましたが、実際の現場ではあまり使われていませんし、使い勝手もそこまで良くないです。

Bootstrapの考え方自体は参考になる


ここからは、余談的な内容になりますが、Bootstrapの考え方自体は参考になると思います。

例えばグリッドとか

グリッドとは、画面幅に合わせて自由自在に要素の長さを変えて表示させるシステムです。

Bootstarp自体は使わないかもしれませんが、Flexboxで似たような実装をしておくと、かなり役に立つかなと思います。

実際、僕も仕事では似たようなことはしていました。

その他、社内でオリジナルのCSSフレームワークを作る際にも参考になるんじゃないかなと。

Bootstrapの勉強法

この記事「【効率的】Bootstrapを学習する方法【3ステップで解説】」で詳しく解説しています。

【効率的】Bootstrapを学習する方法【3ステップで解説】どうも、「なか」です。 この記事では、 「Bootstrapってどうやって学習したらいいの、、、」 「色々な選...

CSSが分からない人でもBootstrapが使えるようになれるレベルの記事なので、ぜひ参考に。

というわけで、この記事はここで終わりとなります。

何か質問等あれば僕のアカウント(@nakafreelog)まで連絡いただければなと(‘ω’)ノ

RELATED POST