質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 509

akkey_bambi

score 4

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

伺いたいこと

実務案件で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サービス開発のご経験がある方のご意見を賜れますと幸いです。
何卒よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/12/19 18:46

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

    キャンセル

  • akkey_bambi

    2019/12/19 19:05

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

    キャンセル

回答 1

+2

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/20 06:06 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る