なぜ私たちはCSSフレームワークを使わないのか - Scott Tolinksi氏、Reactive Conf

原文(投稿日：2020/06/24)へのリンク

最近のReactiveConfセッションで、Scott Tolinski氏は、CSS言語への最近の追加により、開発者は本格的なCSSフレームワークを使用する必要がない可能性があるという主題を擁護した。Tolinski氏は、さらにIE11をサポートする必要のない開発者がCSS変数を活用して、フレームワークよりもオーバーヘッドの少ないカスタム設計システムを実装する方法を実証した。

CSS変数を使用すると、開発者は、ターゲットレイアウトになるCSSプロパティ間の動的な関係を表現できる。CSSカスタムプロパティとも呼ばれるCSS変数は、名前の前に--（例：--background）を付けて宣言する。CSS変数には、var()関数を使用して他のCSS宣言で使用できる値がある。変数は、CSSまたはJavaScriptを介して更新できる。このような更新が発生すると、すべての従属変数がリアクティブに更新される。CSS変数はカスケードに参加する宣言された要素を調べる。

明示的、名前付き、スコープ付き変数、およびユーザ定義の関数計算（var()）を使用すると、開発者はJavaScriptのようなチューリング完全言語での方法に近いカスタムアルゴリズムを表現できる。CSSはもともと計算（プログラミング言語）ではなく静的データ（マークアップ言語）を記述するように設計されていたが、動的に変化するレイアウトを経済的に記述する必要性により、CSSは宣言型の根源に忠実でありながら、通常のプログラミング言語にますます近づいた。

Tolinski氏は、ユーザが6つのテーマの1つを選択できるチュートリアルWebサイトの完全な再設計から得られた具体的なデモを行い、それに応じてユーザインターフェイスの外観を変更する。機能の実装に必要なJavaScriptは、単一のクラスの変更のみで構成される。たとえばoledテーマは、次のCSS変数が設定されたoled-modeクラスに関連付けられている。

.oled-mode {
  --bg-color: var (--darkPurp)
  --sheetHover: var (--black-20)
  --sheetTextColor: var (--white)
  ...
}

上記コードの変数（bg-colorなど）が他の変数（darkPurpなど）からどのように計算され、明示的な依存関係のリストが作成されるかに注意すること。対応するCSSコードはより保守しやすくなっている。変更が簡単で、変更が必要なものを簡単に限定できる。ここで、ダークパープルの値を変更すると、必要な場所すべてに自動的に反映される。黒色を変更しても、背景色は変更されない。

Tolinski氏は、CSS変数がデザインシステム全体の作成にどのように役立つかを続けて説明する。話の都合上、Tolinski氏はデザインシステムを、デザインをユニークにする色、タイプ、間隔、文字、高度、および要素（カードやアコーディオン）などの重要なコンポーネントに絞った。

パレットはCSS変数にエンコードできる。たとえば、既存のツールは、いくつかの基本的な色とコントラストターゲットから、適応性のあるアクセス可能なカラーパレットを生成できる。色を定義した後、Tolinski氏は色の意図と呼んでいるもの（たとえば、--bgColorまたはlineColor）に進めた。

タイポグラフィの観点から、Tolinski氏は既存のツールを活用してフォントとそのスケール比を視覚化することを推奨する。type-scale.comによってコピーアンドペーストの目的で自動生成されたコードの例は次のとおりである。

@import url('https://fonts.googleapis.com/css?family=Poppins:400|Poppins:400');

html {font-size: 100%;} /*16px*/

body {
  background-color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: #333;
}

p {margin-bottom: 1.15rem;}

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1.05rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.15;
}

h1 {
  margin-top: 0;
  font-size: 3.052em;
}

h2 {font-size: 2.441em;}

h3 {font-size: 1.953em;}

h4 {font-size: 1.563em;}

h5 {font-size: 1.25em;}

small, .text_small {font-size: 0.8em;}

Tolinski氏は生成された値をCSS変数で置き換えた。

  --baseFontSize: 1rem
  --baseNavSize: 0.64rem
  ...
  --xtra-big-ass-heading: 3.052rem
  --xtra-heading: 2.441rem
  ...
  --heading-one: 1.953rem
  ...
  --heading-four: var(--baseFontSize)
  --heading-five: var(--smallFontSize)
  ...
  --headingFont: 'Poppins', sans-serif;
  --bodyFont: 'Raleway', sans-serif;
  ...  

追加のタイポグラフィリソースには、modularscale、Figmaタイポグラフィの推奨事項、およびvertical-rhythm-resetが含まれる。

Tolinski氏は、margin-leftまたはmargin-right（margin-upまたはmargin-down）のどちらかを使用するか、両方を使用することなく、マージンの折りたたみのトラップを回避することを推奨している。

デザインシステムの次のコンポーネントである要素は、スタイル付きコンポーネント（例 <Card />または<div class="card">）である。要素は、単純で、明白で、壊れにくく、拡張可能でなければならない。ここでTolinski氏は、Heydon Pickeringによって提唱されているものと同様の手法を推奨している。これは、囲い込みコンポーネントがその子に一般的な方法でレイアウトプロパティを課すためのテクニックである。たとえば、一般的なスタックレイアウトプリミティブは、次のように共通の親を介して要素間にマージンを注入する。

.stack > * + * {  
margin-top: 1.5rem;  
}

リンク先の記事では、このような定式化の利点について詳しく説明し、同様のワイルドカード手法（Sidebarサイドバー、Coverカバーなど）で実現できる他の一般的なレイアウトを紹介している。

Tolinski氏は次のアドバイスで締めくくった

フレームワークには、kbとオンボーディングの両方のオーバーヘッドが必要です。（中略）必要なものだけを書き、バックボーンとして変数を使用します。

色、タイポグラフィー、間隔には常に変数を使用します。サイト全体を一気に更新または構成できます。すべてがカスタムプロパティを使用している場合でも、独自のコンポーネントを作成する必要はありません。すべてがカスタムプロパティを使用している場合でも、独自のコンポーネントを作成する必要はありません。

ReactiveConfは、ソフトウェア開発における最新のテクノロジーとトレンドを取り上げる講演を行う開発者を対象とした年1回の会議である。Covid-19により、ReactiveConf 2020は2021年の初旬に延期された。その間、トークは定期的にオンラインで放送される。Tolinski氏の講演はオンラインで閲覧でき、さらに多くの例と技術的な詳細が含まれている。