Web制作

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

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

この記事では、

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

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

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

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

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

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

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

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

この記事の内容
  • CSSのフレームワークは使わない方が良い理由
  • CSSのフレームワークを使った方が良いとき
  • Bootstrapを勉強するならFlexboxを勉強するべき

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

グリッドについて学ぶ目的などで学習してみるのはありですが、学習に対するリターンはそこまでではないですね。

どうしても使う必要が出てきた場合は、ググりながら使えば良いんじゃないかなと思います。

Bootstrapを勉強するならFlexboxを勉強するべき


余談的な内容になりますが、これからBootstrapなどのフレームワークを学習しようとしていた方は変わりにFlexboxを学習することをおすすめします。

Flexboxとは?

横並び、縦並び、中央揃えなど、要素指定の幅がグッと広がるCSSのプロパティのことです。

CSSのフレームワークを学ぶくらいだったらFlexboxの学習に投資した方が、リターンが大きいですね。

実際の現場でもかなり重宝されているので、学習してみることをおすすめします。

Flexboxの学習方法

僕自身は以下の本で学習しましたね。

Flexboxの使い方が載っていますし、デザインも見やすいです。

HTMLとCSSの勉強も出来るので、基礎学習にはおすすめの本ですね。

動画で学びたい方は、Udemyにも講座があったので、そちらを活用してみるのが良いかと。

セール時なら1000円代で買うことが出来るので、本を買うよりも安い値段で学ぶことが出来ます。

Flexboxを活用して、実際に働いてみればすぐ取り返せる値段なので、割とコスパの良い投資ですね。

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

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

RELATED POST