アーキテクチャ決定記録: CSS フレームワーク

目次:

• 概要
  • 課題
  • 決定
  • 状態
• 詳細
  • 前提
  • 制約
  • ポジション
  • 論拠
  • 影響
• 関連
  • 関連する決定
  • 関連する要件
  • 関連する成果物
  • 関連する原則
• メモ

概要

課題

Web アプリケーションを作成するために CSS フレームワークを使用したいと考えています:

• すべての一般的なブラウザーと画面サイズで、ユーザーエクスペリエンスを高速かつ信頼できるものにしたい。

• デザイン、レイアウト、UI/UX などで素早く反復したい。

• 特にモバイルデバイスなどの小さな画面、4K ワイドスクリーンなどの大きな画面、回転可能なディスプレイなどの動的な画面に対応する、レスポンシブなアプリケーションにしたい。

決定

Bulma に決定しました。

状態

Bulma に決定しました。新しい CSS フレームワークの選択肢が登場した場合は、それに対してオープンです。

詳細

前提

モダンで、高速で、信頼でき、レスポンシブな Web アプリなどを作成したい。

典型的な最新の Web アプリは、複数の理由から jQuery の使用を削減/排除しています:

• 最新の JavaScript は、jQuery が提供してきた多くの機能を段階的に取り込んでおり、jQuery の必要性が低下しています。また、特定の実装を提供する、より優れた/高速な/小さなモジュールがあります

• jQuery の幅広いアプローチは DOM を直接操作することですが、これは最新の JavaScript フレームワーク(例: React、Vue、Svelte)にとってアンチパターンです

• jQuery は、2 回読み込まれると自身と干渉するなど。

制約

jQuery を使用する CSS フレームワークを選択すると、jQuery をインポートせざるを得なくなります。たとえば、Semantic UI は jQuery を使用しますが、Tachyons は使用しません。

最小限の CSS フレームワークを選択すると、今または近い将来に必要になるかもしれないフレームワークのコンポーネントを諦めることになります。たとえば、Semantic UI は画像カルーセルを提供しますが、Tachyons は提供しません。

ポジション

フレームワークを使用しないことを検討しました。CSS グリッドがプロジェクトに必要なものの多くを提供するため、これは今でも実行可能に思えます。

簡単な候補の絞り込みを使用して、多くの CSS フレームワークを検討しました: Bootstrap、Bulma、Foundation、Materialize、Semantic UI、Tachyons など。より深い検討のための 2 つの選択は、Semantic UI(最もセマンティックなアプローチを持つため)と Bulma(今必要なコンポーネントを提供する最も軽量なアプローチを持つため)です。

Semantic UI を検討しました。これは、タブ、グリッド、ボタンなど、プロジェクトに必要なものを含む多くのコンポーネントを提供します。Semantic UI で 2 つの方法でパイロットを行いました: 一般的な CDN ファイルを使用する方法と、NPM リポジトリを使用する方法です。静的な HTML ページでは Semantic UI で成功しましたが、JavaScript の SPA を構築するタイムボックスの中では成功しませんでした(主に jQuery の読み込みの問題のため)。他のコーダーが、私たちと同じ理由で、Semantic UI の開発者に jQuery を使わないバージョンの作成を求めていることが分かりました。他のコーダーは何年も前から jQuery を使わないバージョンを要望していますが、開発者は拒否し、jQuery を使わないバージョンはどれも書くのが難しすぎると述べています。たとえば ~「Semantic UI プロジェクトには、jQuery を使用する接点が 22,000 以上ある」。

Semantic の例:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

Bulma を検討しました。Bulma は Semantic UI と多くの似た機能を持っていますが、高度なコンポーネントはそれほど多くありません。Bulma は jQuery を使わないなど、最新の技術で構築されています。Bulma にはいくつかのサードパーティのコンポーネントがあり、その一部は使用したいかもしれません。

Bulma の例:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

論拠

上記のとおり。

具体的には、Semantic UI には、技術面(つまり jQuery の接点が非常に多い)でも、リーダーシップ面(つまり jQuery を使わないことはロードマップや継続的改善、寄付募集などを試みるのではなく、きっぱりと拒否された)でも、注意の旗が立っているようです。

影響

優れた jQuery 非依存の CSS フレームワークが見つかれば、一般的に役立ち、全体として良いことです。

関連

関連する決定

選択する CSS フレームワークは、テスト容易性に影響を与える可能性があります。

関連する要件

純粋に最新のアプリを素早く出荷したい。

古い依存関係(特に jQuery)を使用する古いフレームワーク(特に Semantic UI)での作業に時間を費やしたくない。

関連する成果物

その CSS を使用するすべての典型的な HTML に影響します。

関連する原則

容易に元に戻せる。

スピードの必要性。

メモ

ここにメモを記入。