CSSフレームワークまたはCSSグリッド：プロジェクトに何を使用する必要がありますか？

私が最もよく聞かれる質問の中には、「CSSグリッドとブートストラップのどちらを使用すべきか」というさまざまな質問があります。 この記事では、その質問を見ていきます。 フレームワークを使用する理由はさまざまであり、そのフレームワークに含まれるグリッドシステムの使用だけに集中しているわけではないことがわかります。 これらの理由を解き明かすことで、作業しているサイトやアプリケーション、および作業しているチームにとって何が最善かという点で、あなたが自分で決定できるようになることを願っています。

この記事では、フレームワークについて話すときに、BootstrapやFoundationなどのサードパーティのCSSフレームワークについて説明しています。 これらは実際にはコンポーネントライブラリであると主張するかもしれませんが、多くの人（自分のドキュメントを含む）はそれらをフレームワークとして説明するので、ここで使用します。 重要な要素は、これらは特定の問題に関係なく、外部で開発されたものであるということです。 サードパーティのフレームワークを使用する代わりに、独自のCSSを作成することもできます。これには、独自の内部フレームワークの開発、開始点としての多数の共通ファイルの使用、またはすべてのプロジェクトの新しい作成が含まれる場合があります。 これらはすべて、非常に一般的なニーズではなく、独自の特定のニーズを参照して行われます。

CSSフレームワークを選ぶ理由

CSSグリッドはCSSフレームワークが行うことのドロップイン代替ではないため、グリッドとフレームワークのどちらを使用するかという問題には欠陥があります。 主題を探求する場合は、CSSグリッドがどのフレームワークを置き換えるかを検討する必要があります。 まず、人々がCSSフレームワークを使用することを選択した理由を調べたいと思いました。 そこでツイッターに目を向けて、このツイートを投稿しました。

質問：プロジェクトにCSSフレームワーク（Bootstrap、Foundationなど）を使用することを選択した場合、その主な理由は何でしたか？

—レイチェルアンドリュー（@rachelandrew）2018年10月16日

たくさんの反応がありました。 私が予想したように、フレームワークを使用する理由は、フレームワークに含まれる単なるグリッドシステムよりもはるかに多くあります。

フレームワークはあなたのチームに既製のドキュメントを提供します

他の多くの開発者と一緒にプロジェクトに取り組んでいる場合、作成する内部システムには、チームメンバーがプロジェクトを効果的に使用できるようにするためのドキュメントも含める必要があります。 有用なドキュメントを作成することは、それ自体が時間のかかる熟練した作業であり、大きなフレームワークが非常にうまく機能するものです。

フレームワークのドキュメントが何度も登場し、経験豊富なフロントエンド開発者の多くがチップを入れて説明しているため、CSSフレームワークを推奨して使用することになります。 CSSをよく知らないのでフレームワークを使っているという意見を時々耳にしますが、多くの人がCSSのエキスパートとして私にはよく知られています。 フレームワークによる選択に不満を感じることもあると思いますが、その選択の肯定的な側面はそれを上回っています。

オンラインコミュニティ：ヘルプへの簡単なアクセス

特定のツールを使用することを決定すると、ユーザーのコミュニティに助けを求めることもできます。 非常に明確なCSSの問題があり、それを実証するためのユースケースを減らすことができない限り、CSSのサポートを求めることは難しい場合があります。 特定のコンポーネントの構築にアプローチする方法を尋ねたい場合は特にそうです。 フレームワークを使用すると、質問の出発点になります。 一般に、最初から始めるのではなく、特定のコンポーネントを変更またはスタイル設定する方法を尋ねます。 これは質問するのも簡単で、答えるのも簡単です。

グリッドシステム

CSSグリッドがあるにもかかわらず、フレームワークを使用することを決めた主な理由はグリッドシステムであると多くの人が答えました。 もちろん、これらのプロジェクトの多くは、CSSグリッドが利用可能になるずっと前に開始された可能性があります。 ただし、今日でも、下位互換性や新しいレイアウト方法のチームの理解に関する懸念により、ネイティブCSSを採用するのではなくフレームワークを使用することを決定する可能性があります。

プロジェクト提供のスピード

ユニークなデザインと効率的なCSSを持っているときは、期日よりもはるかに優先度が低くなりました

— CodingBlocks.net（@CodingBlocks）2018年10月16日

フレームワークを選択すると、一般に、プロジェクトの提供がはるかに迅速になります。特に、そのプロジェクトがフレームワークの実行方法に非常によく適合し、多くのカスタマイズを必要としない場合はそうです。

新しいアイデアのMVPを開発する場合は、フレームワークが優れた選択肢になる可能性があります。 あなたは時間を費やすことがたくさんあり、それでもプロジェクトが何を必要としているかという観点から仮定をテストしているでしょう。 フレームワークを使用して最初のバージョンを開発できると、製品をユーザーの前にすばやく表示でき、使用しないことにしたものを開発する時間を大幅に節約できます。

私は、MVPであるものすべてにフレームワークを使用します。つまり、実際のコンセプトに取り組む時間を最適化するためのツールとフレームワークに関する最小限の開発作業です。

私は、既存の大規模なサイト/アプリのやり直しであるものすべてに独自のCSS「フレームワーク」を作成します。

—ベンボディエン（@bbodien）2018年10月16日

スピードと既成のコンポーネントの束が非常に役立つもう1つの場所は、サイトまたはアプリケーションのバックエンド管理システムを開発するときです。 いくつかの管理画面を作成するだけでよい場合、フレームワークを使用すると、フォームフィールドやその他のコンポーネントのスタイル設定にかかる時間を大幅に節約できます。 BootstrapとFoundationのダッシュボードテーマもあり、役立つ出発点になります。

私はデザイナーではありません！

この点が、私が過去にCSSフレームワークを選択した理由です。 私はデザイナーではありません。何かをデザインすることと構築することの両方をしなければならない場合、私は完全に資格のないデザインの決定を下すために長い時間を費やします。 すべてのサイドプロジェクトにデザイナーを雇うための資金があればいいのですが、私はそうではないので、フレームワークは物を出荷するかしないかの違いを意味するかもしれません。

CSSのバグとブラウザの互換性の問題への対処

実際のバグや特定の機能のサポートの欠如が原因で、フレームワークの作成者がすでにブラウザの問題に対処しているという事実は、私が思っていたよりも少ない言及でした。 しかし、これは依然として多くの人々の意思決定の要因でした。

レスポンシブデザインを支援する

Webページの応答性。 Webページのブレークポイントを決めるのは難しいと思いました。

—ファイサルアリ（@f_a_akhtar）2018年10月18日

これは数回発生しました。 人々は、特にそれが応答性であるという事実、または私が彼らのためにブレークポイントについて決定を下したという事実のために、フレームワークを選択していました。 これがフレームワークを使うことを選択する際の要因として具体的に指摘されたものであることが興味深いと思いました。

フレームワークを使用してみませんか？

フレームワークが選択された前向きな理由の中には、人々がその選択に関して抱えていた問題のいくつかがありました。

フレームワークコードのオーバーライドの難しさ

多くの人が、フレームワークで使用されているコードをオーバーライドすることが難しくなる可能性があり、多くのオーバーライドが必要ない場合はフレームワークが適切な選択であるという事実についてコメントしました。 使いやすさの利点、およびフレームワークの使用方法を理解しているチームの全員が、膨大な数のカスタマイズが行われていると失われる可能性があります。

すべてのウェブサイトは同じように見えることになります

同じように見え始めたすべてのWebサイトの責任は、よく知られているCSSフレームワークの扉に正直に置かれています。 特定のフレームワークが使用されていると確信しているサイトを見たことがありますが、それらがカスタムCSSであることがわかりました。そのため、これらのフレームワークで行われる設計上の選択が一般的です。

すでに述べたフレームワークスタイルをオーバーライドすることの難しさは、特定のフレームワークを使用して開発されたサイトが類似する傾向がある理由の大部分です。 これは単なる創造的な問題ではありません。同じフレームワークを選択したいくつかのWebサイトのユーザーが、すべて同じものであると感じるのは非常に奇妙なことです。 ブランドを伝え、優れたユーザーエクスペリエンスをその一部にするという点では、フレームワークの一般的な選択を選択すると、おそらく何かを失うことになります。

全世界のCSS問題を継承する

フロントエンドであろうとバックエンドであろうと、主流を狙うツールやフレームワークは、可能な限り多くの問題を解決する必要があります。 ツールが1つの特定のユースケースを解決するために緊密に結合されていない限り、ツールには多くの非常に一般的なコードと、あなたが持っていない、そして決して持っていない問題を解決するコードが含まれます。

最新のブラウザで完全なエクスペリエンスを表示するだけでよいという幸運な立場にある可能性があります。これにより、InternetExplorerまたは古いバージョンのChromeでのエクスペリエンスがより制限されます。 IE9に戻る多くの組み込みサポートを備えたフレームワークを使用すると、特に最近のCSSレイアウトの改善を考えると、多くの追加コードが発生します。 また、フレームワーク内のすべてがこのサポート要件を想定しているため、創造性を損なう可能性があります。 CSSを使用して可能なことは、フレームワークによって制限される可能性があります。

例として、一般的なフレームワークのグリッドシステムには、グリッドレイアウトより前のレイアウトシステムには概念や行がないため、行にまたがる機能がありません。 CSSグリッドレイアウトはこれを簡単に可能にします。 ブートストラップグリッドに縛られていて、デザイナーが行にまたがる要素を含むデザインを思いついた場合、グリッドがターゲットブラウザーでサポートされている可能性があるにもかかわらず、それを実装できなくなります。

パフォーマンスの問題

上記に関連するのは、使用している正確なユースケースに最適化されたものではなく、かなり一般的なコードの使用に固有のパフォーマンスの問題です。 パフォーマンスを向上させようとすると、フレームワークの決定にぶつかることになります。

技術的負債の増加

スピードは、主に、長期的にはかなりの技術的負債を生み出したため、それが少し誤った経済であることがすぐにわかりましたが。

— Tim Cthulhuegdon（@nefarioustim）2018年10月16日

フレームワークはスタートアップをすぐに軌道に乗せるための素晴らしい方法かもしれませんが、その決定を下すときに、それを置き換えると確信していますが、それを実現する計画はありますか？

CSSを学ぶのではなくフレームワークを学ぶ

会議やワークショップの参加者と話をしていると、多くの人がCSSを作成するためにフレームワークを使用したことがあるだけであることがわかりました。 今日のWebプラットフォームの複雑さを考えると、これらのツールの1つを介してWeb開発に参入することに何の問題もありません。それが、多くの人々にとっての道になると思います。 ただし、特にスキルの基礎となるフレームワークが不利になった場合は、キャリアを制限する選択肢になる可能性があります。

CSSの知識がないフロントエンド開発者がいると、会社は心配する必要があります。 チームがCSSなしでCSSを実行する方法を実際に理解していない場合、そのフレームワークから離れることは非常に困難になります。 これは実際にはフレームワークを使用しない理由ではありませんが、フレームワークを使用する際には注意が必要です。 離れる日が来たら、CSSの書き方を覚えておく（または初めて学ぶ）必要がなく、チームが何か新しいことに取り組む準備ができていることを願っています。

選択はエンドユーザーを考慮しません

ニコール・サリバンは、CSSフレームワークだけでなく、フロントエンドフレームワーク全体を検討していましたが、この記事を書くことを考えていたとき、私の質問の数日前にほぼ同じ質問をしました。 Jeremy Keithは、エンドユーザーに関する回答はまったくゼロであると述べました。 これは私の質問への回答にも当てはまりました。

サイトを迅速に構築するための競争において、サイトの設計者や開発者として自分たちのためにできる限り良いものを作りたいという私たちの願望は、私たちが誰のためにこれを行っているのかを忘れていますか？ フレームワーク開発者が下した決定は、構築しているサイトのユーザーのニーズと一致していますか？

フレームワークを「バニラ」CSSに置き換えることはできますか？

フレームワークを交換したり、フレームワークなしで新しいプロジェクトを開始したりすることを検討している場合、そのプロセスを簡単にするために検討できることは何ですか？

フレームワークのどの部分が必要かを理解する

フレームワークの使用を独自のCSSに置き換える場合は、現在のフレームワークの使用を監査することから始めるのがよいでしょう。 使用しているものとその理由を理解してください。 新しいデザインでそれらをどのように置き換えるかを検討してください。

フレームワークを選択するか、独自のフレームワークを作成するかを考えるときも、同様のプロセスに従うことができます。 これのどの部分が必要になると合理的に期待できますか？ それはあなたの要件にどの程度適合していますか？ インポートするコードがたくさんあり、訪問者にダウンロードを依頼する可能性がありますが、決して利用しませんか？

文書化されたパターンライブラリまたはスタイルガイドを作成する

私はパターンライブラリを扱うのが大好きです。フラクタルの使用については、SmashingMagazineの私の投稿を読むことができます。 パターンライブラリまたはスタイルガイドを使用すると、すべてのコンポーネントとともにドキュメントを作成できます。 パターンライブラリのCSSで作業することから、すべてのプロジェクトを開始します。

ドキュメントを書く人として、あなたはまだドキュメントを書く必要があります、しかし、私はしばしば最も難しいことはどこから始めて、そしてどのようにドキュメントを構成するかを知ることであることを知っています。 パターンライブラリは、コンポーネント自体のCSSとともにドキュメントを保持することでこれを支援します。 このアプローチは、ドキュメントが参照するコンポーネントに緊密にリンクされているため、ドキュメントが古くなるのを防ぐのにも役立ちます。

独自のCSSコードガイドラインを作成する

チーム全体の一貫性は非常に有用であり、フレームワークがなければ、それを指示するものは何もないかもしれません。 特に、新しいレイアウト方法では、パターンを構築する方法がいくつかあることがよくあります。全員が別のパターンを選択すると、不整合が発生する可能性があります。

助けを求めるためのより良い場所

Stack Overflowの方向に人々を送る以外に、CSSについて助けを求める場所は非常に少ないようです。 特に初心者にとって親しみやすい場所は少ないようです。 サードパーティのツールから離れるように人々を奨励する場合は、それらのツールを取り巻くコミュニティからのフレンドリーで役立つサポートの必要性を満たす必要があります。

企業内では、経験豊富な開発者が新しいチームメンバーのCSSサポートになる可能性があります。 フレームワークから独自のソリューションに移行する場合、特に過去にヘルプが必要だったときにサードパーティツールの周りに提供されたヘルプを使用することに慣れている場合は、ギャップを埋めるためにどのようなトレーニングが必要かを検討するのが賢明です。 。

デザイナー以外の人のためのスタイルガイドまたは出発点

「どのフォントを使用すればよいですか？」、「見出しは本文との関係でどのくらいの大きさにする必要がありますか？」、「ドロップシャドウを使用しても大丈夫ですか？」などの質問に結びつきます。 私はCSSを簡単に書くことができます—私が何をしようとしているのかを知っていれば！ 私が本当に必要としているのは、ひどいデザインを作成するためのいくつかのルール、ある種のタイポグラフィの出発点、または一連の基本的なガイドラインが、多くの場合、フレームワークのデフォルトを使用できるようになることです。

現代のブラウザの相互運用性の状態について人々を教育する

フレームワークベースの開発に何年も没頭している人々は、ブラウザの相互運用性を数年前から見ていることがよくあることを発見しました。 CSSがクロスブラウザで動作するという点で、これほど良い状況になったことはありません。 一部のブラウザはCSSの新しい光沢のあるビットをサポートしていない可能性がありますが、一般に、CSS（サポートされている場合）は奇妙なバグでいっぱいではありません。 たとえば、ほとんどすべての場合、あるブラウザでCSSグリッドを使用すると、CSSは別のブラウザでもまったく同じように機能します。

フレームワークがブラウザのバグから彼らを救うと信じているチームメンバーにフレームワークを使用しないことを主張しようとする場合、この点は提起するのに役立つかもしれません。 ブラウザの互換性の問題は本当ですか、それとも過去の懸念に基づいていますか？

新しい種類のフレームワークが表示されますか？

私が興味を持っているのは、新しいレイアウト方法が新しい種類のツールとフレームワークの先駆けとなるかどうかです。 新しいレイアウト方法を利用し、創造性を高めながら、チームや個人に私のツイートへの回答から得られた否定できない利点のいくつかを提供するツールが表示されますか。

おそらく、組み込みのグリッドシステムではなく、新しいレイアウト方法に依存することで、新しいスタイルのフレームワークがはるかに軽量になり、便利なコンポーネントのコレクションになる可能性があります。 そうすれば、非常に一般的なコードに固有のパフォーマンスの問題のいくつかを回避できる可能性があります。

フレームワークが役立つ可能性のある領域は、新しいレイアウト方法をサポートしないブラウザーの確実なフォールバックの作成を支援すること、またはコンポーネントに実際に確実なアクセシビリティを組み込むことです。 これは、相互運用性とアクセシビリティを考慮した作業方法へのガイダンスを提供するのに役立つ可能性があります。これらのことを最前線に置いていない人でも同様です。

CSSグリッドレイアウトのブートストラップグリッドを切り替えるだけでは、これが達成されるとは思いません。 代わりに、新しいフレームワークを考え出す作成者は、おそらくここで概説した理由のいくつかを見て、CSSの新しい機能を使用して新しい方法でそれらを解決しようとする必要があります。

フレームワークを使用する必要がありますか？

あなたとあなたのチームは、その質問に自分で答える必要があります。 そして、人々があなたに信じさせようとするかもしれないことにもかかわらず、普遍的な正しい答えも間違った答えもありません。 あなたのプロジェクトにとって正しいか間違っているかだけがあります。 この記事と私の最初の質問に対する多くの回答が、あなたがその質問を熟考するときに議論するいくつかのことをあなたに与えることを願っています。

答えは時間とともに変化することを忘れないでください。 サイトの開発を最初に行うという観点から、今必要なものを検討するだけでなく、サイトの寿命を検討することは、有用な思考実験になる可能性があります。 これは5年後も続くと思いますか？ それでは、あなたの選択はポジティブなものですか、それともネガティブなものですか？

決定を文書化し、それらを再検討することを恐れないでください。そして、あなたとあなたのチームが、あなたが使用することを決定したフレームワークの外であなたのスキルを維持することを確実にしてください。 そうすれば、将来的に進んで、プロジェクトの次のフェーズに向けて最善の決定を下すのに適した場所になります。

そのツイートで始まった会話を続けてほしい。 コメントであなたのストーリーを教えてください—彼らは今彼らのプロジェクトに最適なものを見つけようとしている他の人々を助けるかもしれません。