その他

CSSフレームワークのメリットとデメリットについて

投稿日:

今更感が少しある内容ですが、CSSフレームワークと言えば、Bootstrap、UIkit、Bulmaなどが有名ですよね。その他でも、ミニマムフレームワークとして、最小限の機能が備えられた物もありますね。

CSSフレームワークは、レイアウトやUIパーツをスピーディーに作れるようにしたもので、すでに用意されているクラス名を指定する事で簡単にデザインする事が出来ます。かなり汎用性が高いので、どんなサイトでも共通するような部分は爆速で作れるため、かなり便利だと思います。

しかし、その便利さを追求した結果、デメリットが生まれる場合もあり、人によってはCSSフレームワークを使わない方が良いと指摘する人もいれば、いや使った場合のメリットの方が大きいでしょと言う人もいます。

ぶっちゃけ、CSSフレームワークのメリットとデメリットってどうなの?っていう部分を個人的な視点から解説したいと思います。

フレームワークとは

フレームワークとは、一定のルールを定めた枠組みの事です。これはCSSだけではなく、プログラミングの世界にも存在するものです。

フレームワークで決められた流れに従う事で、簡単に何かを作れたり、ありきたりな作業を行う必要が無くなったりします。

CSSフレームワークのメリット

CSSフレームワークのメリットはたくさんありますが、その中でも代表的なものをご紹介します。

レイアウトを簡単に作れる

例えば、一般的なサイト構成だと、ヘッダー、フッター、サイドバー、メインコンテンツと言ったセクションに分けられると思います。

例えば、初心者の方によくありがちなのが、サイドバーとメインコンテンツを横並びにする際に苦戦してしまう、親要素が子要素からはみ出してしまう等の問題。

CSSフレームワークはレイアウトをすでに作ってくれていて、このようにHTMLを書いてくださいねとサンプルを用意してくれているので、作りたいものと出来上がったものが全然違うというような問題に遭遇しづらくなります。

プロトタイプを爆速で作れる

レイアウトを簡単に作れると書いておりますが、レイアウトの他にも画像のスライド表示だったり、コメントの一覧表示を行うためのパーツが用意されていたりするので、とりあえずのプロトタイプ(試作品)を爆速で作れます。

作る時の感覚としては、完成品のパーツを組み合わせて、一つのページを作るようなイメージです。

Javascriptライブラリを集めなくていい

例えば、フェードインで表示させるためにこのライブラリを入れて、ダイアログを表示するためにはこのライブラリを入れてというような作業がほとんど必要ありません。なぜなら、CSSフレームワークのほとんどがこういうJavascriptの処理等も一緒にまとめてくれています。

内容によりますが、よくあるパターンの処理は大体CSSフレームワークで用意されているものを利用するだけで事足ります。

また、色々とライブラリを入れた事で何かが動かなくなるという互換性問題に遭遇するというリスクも減るため、無駄なテストを行う時間を節約できたりします。

CSSフレームワークのデメリット

CSSフレームワークのデメリットは、実際に体験して理解できるところもあるかもしれませんが、個人的に感じたものを挙げてみます。

デザインがありきたり

単純にCSSフレームワークを使うだけでは、デザインがありきたりになってしまいますので、あくまでベースを作る用途に使われる事がほとんどです。

元のスタイルに対して、オリジナルのスタイルを上書きしていけば、独創性の高いデザインにも変更できます。しかし、あまりにもCSSフレームワークの想定からはみ出る変更が必要な場合は、逆に非効率的な作業量になる場合もあります。

クラス名の名付けで迷う

これはCSSフレームワークによっては困らない場合も多いですし、ちょっと工夫すれば回避できる問題でもありますが、自分が名付けたいクラス名がすでに使われていたりします。

HTMLの可読性が下がる

例えば、以下のようなコードが代表的です。

このコードはBootstrapでアラートを作る場合のサンプルですが、クラス名は3つもあり、他にも色々と書いてますよね。

極端な話、これを自分で最初から作った場合、クラス名はalertだけで良かったりします。

基本的にCSSフレームワークはすでに用意されたクラスを要素へ割り当てていくのですが、1つ1つがシンプルに作られているので、marginプロパティ用のクラス、padding用のクラスみたいな感じで1プロパティ増える毎に1クラス増えるみたいなイメージです。

そのため、CSSフレームワークで補おうとするほど、HTMLの読みやすさが落ちる傾向にあります。

使い方を学ばないといけない

これは当たり前のことですし、そんなに大変な事ではないのですが、CSSの書き方を分かっている人でも、CSSフレームワークを使った場合はどのように書くというのかという部分で悩むかもしれません。

慣れるとどんなCSSフレームワークも何となくですぐ使えるようになると思います。

無駄にロードするファイルが増える

あまり遅さとかは感じていないのですが、どうしても使わないものまで読み込むパターンが発生します。

制作効率を落としてでも、通信量を可能な限り減らしたいみたいなケースでは、デメリットになる部分だと思います。

最後に

僕はシステム開発がメインなので、デザイン重視のサイトを作る事は少ないです。管理画面みたいなデザインよりも機能性重視みたいなパターンでは、BootstrapやUIkitというフレームワークをよく使っています。

たまにクラスがいっぱい増えて見づらいな~とか、自分でクラス定義する時にすでに宣言されているから重複するの嫌だな~とか思いつつ、メリットの方が大きいように思います。

実際に使っている身として、すぐに思い当たる部分としては以上なので、良かったらご参考までに!

-その他
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Gulpで複数ディレクトリのSCSSを自動コンパイルする方法!

Gulpは様々なタスクを実行するためのNode.jsで開発されているアプリケーションです。今回はGulpを利用して、SCSSを自動コンパイルする方法をご紹介したいと思います。 準備 プロジェクトのルー …

MacにHomebrewをインストールする方法!

今回はHomebrewのインストール手順をご紹介したいと思います。プログラマやエンジニアの方であれば、技術ブログ等を読む事があると思いますが、Macで何らかの環境を用意する際にHomebrewを利用す …

【WordPress】使いにくい新エディタをプラグインで旧式に戻そう!

2018年12月にWordpressのバージョンが5.0へアップデートされましたが、とにかく使いづらいの一言です。久しぶりにブログ投稿でもしようかと思った時、新バージョンにアップグレードしておくかと思 …

【レビュー】Softbank Airの速度は速いのか?それとも遅い?

最近、引っ越しをする機会があったのですが、インターネット回線をどうしようと悩んでいたところ、ソフトバンク光と契約する事になりました。ソフトバンク光にしたきっかけとしては、Softbank Airが開通 …

【Node.js】npmでグローバルインストールをしない方が良い理由

npmでインストールする場合、オプションが複数存在しています。技術ブログ等でnpmを利用したパッケージのインストール方法を提示されている際、オプション付きのコマンドが用意されている場合がありますが、皆 …