みんなCSSフレームワークのこと勘違いしてない？

2020-06-02

フロントエンドエンジニアとして、現場でたまに CSS フレームワークの使用について聞かれますが、自分は大体、

「使わないほうが良いですよ」

と答えることが多いです。

そんな CSS フレームワーク嫌いの自分ですが、現場の方の CSS フレームワークに対する勘違いを書いていこうと思います。

CSS を知らなくても使えるんでしょ

JavaScript の UI フレームワークの一つに React が挙げられますが、「React は JavaScript を知らなくても使えるんでしょ？」と同じようなことを言っていることに気づかないのでしょうか。

個人的には当たり前だと思っているのですが、あくまで CSS フレームワークである以上、CSS の知識を持っている前提で使用することが求められます。

フロントエンド向けのロードマップにも書かれていますが、CSS を学び、JavaScript フレームワークを学んだそのあとで学習すべきものです。

フロントエンドエンジニアを名乗る以上は CSS が書けるはずですが、現実はそこまで甘くはないようです。

確かに React などを用いたコンポーネントの作成はフロントエンドエンジニアが行いますが、プロトタイプの作成は Web デザイナーが行うはずです。

ということは、必然的に Web デザイナーが CSS フレームワークに対する知見を持っておく必要が出てきます。

ということは、必然的に Web デザイナーが CSS の知識を持っていないと扱えないということになるわけで…。

コーディングも行わずに CSS フレームワークを用いてレスポンシブ対応を行うのって、すげー難しそうなイメージがありますが、どうなんですかね。

カスタマイズ前提で CSS フレームワークを導入すると、フレームワークの意図が無視される可能性が出てくるため非常に危険です。

基本的には CSS フレームワークに寄せてプロトタイプの作成を行うべきです。

安易に CSS を上書く現場を多数見てきましたが、大体破綻してました。

特にレスポンシブ周りで引っかかっている現場が多いのかなーと。

また、プロジェクトマネージャやディレクターなどが安易に CSS フレームワークから外れた注文を行うところも多いよなぁと。

CSS フレームワークに則ったプロトタイプが絶対という考え方がプロジェクト内で統一されていない現場での導入は危険です。

カスタマイズを行う場合は、きちんと公式のドキュメントに則って行いましょう。

外部パッケージである以上、最新バージョンへの追従は必須です。

フレームワークによってはメジャーバージョンアップによってかなりの破壊的変更が行われるものもあります。

Bootstrap の v3 から v4 へのアップデートとかすごかったですよね。

破壊的変更への対応を嫌がり、たまにパッケージのアップデートを怠っている現場もありますが。

脆弱性の修正が入ることもあると思いますし、アップデートを怠るのが良いことだとは誰も思いませんよね。

上記で挙げたロードマップに則り、CSS フレームワークの知識を持つことは非常に重要です。

しかし、現場によっては「メジャーなやつはダサいからマイナーなフレームワークを使おう」とか「CSS 上書きまくれば良いや」とか「ライセンス料は無視でいいや」などなど、どこもめちゃくちゃやってます。

CSS フレームワークを使用する際は、最低限以下が守れるようにするべきだと考えます。

上記を守れる現場が果たして存在するのか、疑問ではあります。