CSSフレームワークを改造するメリット・デメリット

Question

初めて質問させていただきます。
都内でフロントエンドエンジニアとしてサービス開発を担当しています。

伺いたいこと

実務案件でCSSフレームワークを改造するメリットとデメリットについて、可能であれば経験値も添えて皆様の見解を伺いたいです。

前提

今回自社の新規事業のWEBサービス開発にフロントエンド兼PMとしてジョインしました。
メンバー構成は下記になります。

役職	人数
BO	1名
PM	1名(週2日)
FE	1名(週2日)
BE	2名(人日不明)

お分かりの通り、フロントエンドが不足している状態です。
また自分はSIerとして出向も含めの対応になるため、週2日のみの稼働になります。

開発環境は下記です

• フロントエンド：React.js(TypeScript使用)
• バックエンド　：cakePHP

デザイナーは外部の方に依頼し、必要画面(Component)のみ依頼しデザインしていただいています。
基本いただいたデザインとComponentのデザインパターンから各画面を実装していく流れを想定しています。

リリースまでの速度感が重要視されている点、フロントエンドの工数が不足している点を考慮しバックエンドのメンバーの方々も機能実装する際にDOMを構築していくつもりというお話で進んでいます。
その中でCSSフレームワークをどれか採用してみてはというお話が出てきました。

想定および試した内容

本プロジェクトはプロのデザイナーの方に丁寧にデザインを構築していただいております。
デザインありきの場合、フレームワークを採用したとしてもデザインに合わせてスタイルの上書きを行う必要がある認識でいた為、今回もバックエンドの方にもDOMを構築していただいたとしても、その後フロント側がその画面をざっと見直しDOMの調整をする認識でいました。

上述した前提のもの試験的にBulmaを実装してみることにしました。
css modulesとして活用しnpmで追加したBulmaをimportし使用しました。
その上から独自のクラスを割り当てることで不要なスタイルの打ち消しと必要なスタイルの追加を実装しました。

ただ、それでは認識として上長とずれがありクラスの上書き等をせずにComponentを割り当てていくだけでDOMを構築できるように進めたいということでその上でフレームワークを入れるかどうか検討してくれというお話だった為、今回このような形で質問させていただきました。

CSSフレームワークで担保する範囲（想定）

あくまで画面単位でサーバーサイドのメンバーも画面構築をできることが前提とした話なので、画面内の要素として存在するものは全ての想定です。
ピュアにCSSフレームワーク内のものだと以下を現段階想定しています。

• input
• button
• flex
• checkbox
• pagination
• select
• メディアクエリの変数

ただし、上記上げたものもデザインに合わせてスタイルを調整することが前提です。
更に画面を構築している要素且つCSSフレームワークにはないComponentも存在する為それらは独自に定義する必要がある前提です。

伺いたいこと - 詳細

その中で、何かしらのCSSフレームワークを導入するということはデザインに合わせてフレームワーク側の改修作業が発生する認識でいます。

また、BootstrapやBulmaなどSCSSで記述されているものも多く、また内包しているComponentの数も多いフレームワークはデザインが確定する前のプロトタイプ段階で使用するものという認識でおりました為、導入に対してのコスト感のイメージとメリットが思いつかずにおります。

諸先輩方の中で実務案件でデザインが存在している且つ、CSSフレームワークを使用したWEBサービス開発のご経験がある方のご意見を賜れますと幸いです。
何卒よろしくお願い致します。

Comments

[m.ts10806]

CSSに限らずですが、フレームワークでどの部分を担当させるかになってくると思います。主軸に進めることもできますし、1部分だけ担当させることも出来ます。
それでいうと「正解はない」「メリットもデメリットもある」程度の回答になるかと思いますが・・・。

[akkey_bambi]

分かりづらく大変失礼いたしました。
加筆編集させていただきました。

Answer 1

個人的にはCSSフレームワークを用いてWEBサイトを開発することはほぼありません。
ただ、FWのコードの一部を流用したり参考にしたりすることは多々あります。

フレームワーク側の改修作業が発生する認識でいます。

そうそうそのような場面が発生しないはずです。
発生した場合は、他のCSSで上書きしている人が多い印象です。（teratailの質問をもとにした主観
上書きでも対処できない場合、そこだけ独自に作るというのも手です。

導入に対してのコスト感のイメージとメリットが思いつかずにおります。

長期的に見たり、他者への引き継ぎを考えると導入はメリットかと思います。

ただ、反面で無理して上にあげたメリットを求めてFWを導入するならそれは完全なるデメリットです。

Comments

[m.ts10806]

CSSフレームワークは大抵CDN使うので直接触ることはあまりないですね。＋１