通常、プロジェクトには、通常、秩序と一貫性のある程度のような方法で指定された変数として、事前に決定されたフォントサイズのセットがあります。かなりのサイズのプロジェクトは、そのようなものを使用できます。常に見出し、段落、リストなどがあります。は、にフォントサイズを明示的かつ直接設定することができます（例：font-size：18px）。生のCSS、そのまま。私は時々それを見る - サイズだけでなく、PX、REM、EMなどのユニットも無気力な混乱をもたらします。

。

そのため、プロジェクトのCSSは通常、変数またはミックスインを使用します。構造、保守性、そして最終的には一貫性を撮影しています。私たちは皆、命名が難しいことを知っていますが、フォントサイズの変数を命名してその理由を確認するよりもはるかに見ることはありません。フォントサイズの小さな変数にどのように名前を付ける必要があります。そうすれば、フォントサイズの大きな変数よりも小さいことが明らかです。そして、それらの間に新しい変数を挿入する必要がある場合はどうなりますか？それは、他のサイズ変数との関係を明確に説明する方法で名前が付けられていますか？

この投稿のフォントサイズ変数の名前の名前について説明します。しかし、実際には、問題はフォントサイズを超えてあらゆる種類のサイズまたは長さの値にまで及びます。パディング、マージン、幅、高さ、境界半径などを考えてください。これらのものは構造と一貫性も必要です！

プロジェクトのフォントサイズをどのように定義しますか？カスタム変数でこのように見えますか：

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

またはおそらくSASS（これはこの記事全体で使用するものです）では、$ small、$ medium、および$の大きなフォントサイズの変数があるかもしれません。

大丈夫。しばらくして、デザイナーがヒーローセクションの新しい

を追加しているとしましょう。そして、それは非常に大きいです。あなたがプロジェクトに持っているものよりも大きい。問題ありません、返信します。あなたはプロジェクトに$ xlargeを追加し、あなたの一日を過ごします。

翌日、デザイナーは素敵なフォームレーベルを作成します。これは再び新しいフォントサイズを備えています。ただし、この新しいサイズは、小さいですが、中程度よりも大きいです。

さぁ行こう。

あなたはそれを何と呼ぶべきですか？ $小規模？ $ small-2？ $ smedium？あなたがそれに名前を付けるものが何であれ、あなたはそれに満足しません。その言葉がないからです。

またはあなたはそれをリファクタリングする必要がありますか？新しい$ xsmallを作成し、$ smallのすべてのインスタンスを$ xsmallに変更しますか？そして、フォームラベルに$ smallを使用できますか？どこかで変更するのを忘れるという小さなリスクがあります。次回は、$ medium変数値よりも大きいサイズの何かが導入されるとどうなりますか？ $ largeと$ xlargeもリファクタリングする必要がありますか？

私は常にスケールに固着することをお勧めします。簡単な修正は、さらに抽象化することです。おそらく、$ small-2や$ xsmallの代わりに$ form-labelなどの機能名を支持して数字とサイズを捨てることです。

しかし、このようなフォントサイズのセットを持っていることを想像してください：

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

それは壊れたスケールです。サイズの概念とコンポーネントの概念が混ざり合っています。それは疑問を投げかけます。アラートまたはボタンを$ form-labelの使用を許可する必要がありますか？ Yuck。

多分あなたはギリシャのことを起こしています、変数$ alpha、$ beta、$ガンマに名前を付けますか？それでは、$ alphaよりも大きいものは何ですか？ $ alpha-large？または、$ alphaはは小さな 1つですか？

また、$ button-font-size、$ label-font-size、$ blockquote-font-sizeなどの名前を見てきました。それは、スケールではなく、使用される要素ごとに1つの変数のように思えますが、複数の場所で同じ値が使用されている場合、異なる名前で使用されている場合、多くの重複コードになる可能性があるように聞こえます。

おそらく、1つのベースフォントサイズとパーセンテージのみで作業しているのでしょうか？確かに、でも、パーセンテージの変数が必要だと思います。それが、ジェフがフォントのサイジングを処理する方法であり、彼はセットアップが彼自身の眉を上げることを認めています。主観的に名前の変数を使用した計算は明確かもしれませんが、プロジェクトに飛び込む他の人にとっては狂ったように見えるように複雑です。

H1 { font-size：clamp（var（ - text-size-large）、calc（var（ - text-size-base） * var（ - text-size-scaler））、var（ - text-size-huge））; }

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

より良いシステムが必要です

スタッフの追加と削除

を絶えずは、がを求めている方法です。これは現代の開発です - MVP 、アジャイル、および他のすべての熱い流行語。

必要なのは、変更の余地を可能にするスケールの構文です。スケールに新しいサイズを追加することは、壊れた変更を導入することなく簡単にする必要があります。

柔軟なと Infinite の両方のスケールを考えています。 $ small、$ medium、$ largeよりも洗練されている必要があります。

また、

記述および intuitive である必要があります。できれば、設定ファイルまたは構成の変数名、またはこれらのものをどこに保存するかを検索する必要はありません。 $ sigmaの前または後に$ Epsilonが来るかどうかは、少しの手がかりがありません。あなたは？

既存のシステムを使用して

新しいものを発明しようとする前に、活用できる既存の構文やシステムはありますか？ここに私が遭遇したいくつかがあります。

国際単位システム

確かに、「kilobyte」や「​​megabyte」などの用語に精通しています。ヨーロッパ人は「ミリメートル」と「センチメートル」に非常に慣れています。その他の例は、「ギガ」、「テラ」、「ペタ」です。これらのプレフィックスは、長さ、重量、体積などに使用できます。 $ Centiフォントサイズは機能しますか？それはある程度直感的です。つまり、メトリックシステムに精通している場合です。これは有限スケールです。また、新しいサイズを追加する余地は既に設定されています。

従来のポイントサイズの名前

コンピューターとデスクトップの出版、書籍と新聞がリードタイプで印刷されるずっと前に。タイプセッターには、さまざまなサイズの異なる名前がありました。サイズにはポイントサイズ（PT）への参照があり、理論的にはピクセルサイズ（PX）に使用できます。

。

このシステムのタイプサイズは、「ノンパレール」、「ピカ」、「シケロ」、「グレートプライマー」と呼ばれます。名前は大陸と国によって異なります。さらに、同じ名前が異なるサイズを持つことができるので、…非常に混乱します。

と言った、私はこのシステムが過去の時代から古い職人技に敬意を払うようなものだからです。しかし、名前は非常に奇妙で、具体的にはタイプのサイジングを目的としているため、ブレークポイントや間隔などに使用するストレッチのように感じられます。

日常のオブジェクトをスケールに配置する

私たちの日常生活のものを使ってみませんか？チリペッパーズと言う。

唐辛子には多くの種類があります。 $ habaneroは、$ cayenneよりも熱く、$ halapenoよりも高温です。それは楽しいでしょう、ええ？

しかし、フォントサイズを書くというアイデアを楽しんでいるのと同じくらい、$ Tabasco、2つの問題が見られます。ピーマンに興味がない場合、どのコショウが他のコショウよりも熱いかを知ることができません。したがって、それは普遍的に直感的ではありません。また、ピーマンはスコービルスケールで0であり、それ以下は何もありません。カロライナ・リーパーは世界で最もホットなコショウであるため、スケールは有限です。

とええ、ペッパーのスケールでは大きくも小さくも、熱くなります。悪い概念。たぶん、ボールの種類のようなより一般的なもの？

さまざまな種類のボールがあります。ハンドボール、サッカーボール、バレーボールなどがあります。薬のボールよりも大きなものが必要ですか？ $ビーチを使用してください。テニスボールよりも小さいものは？ $ pingpongを使用してください。これは非常に直感的です。ある時点で誰もがあらゆる種類のボールでプレイしたこと、または少なくともスポーツから馴染みがあると思います。

しかし、ピンポンボールはゴルフボールよりも大きいですか？知るか？さらに、ボウリングボールとサッカーボールは実際には同じサイズです。だから…繰り返しますが、完璧ではありません。

惑星までのスケールアップは機能する可能性がありますが、天文学に精通している必要があります。

ストレートアップ数はどうですか？ Stylelinterのようなツールが抗議するため、数字だけを使用することはできません。しかし、このようなものはうまくいきます：

$ font-14：14px; $ font-16：16px; $ font-24：24px;

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

動物王国はどうですか？

母なる自然は、この地球上に無数の種を提供しました。このようなことを想像してください：

$マウス：12px; $ dog：16px; $ hippo：24px;

$mouse: 12px;
$dog: 16px;
$hippo: 24px;

しかし、繰り返しますが、フォントサイズの動物園にどの動物が含まれているかを正確に知らない限り、変数を参照する必要があるかもしれません。しかし、それが拡大する限り、それは大したことではないかもしれません。

私はこれを熟考するのにあまりにも多くの時間を費やしました

または私は持っていますか？コードベースは、勤務時間を費やす場所です。椅子やモニターのように、それはあなたの職場環境です。そして、職場はいい場所でなければなりません。

フォントサイズのスケールをどのように処理しますか？フォント用のシステム、マージンなどのシステムはありますか？誰かがあなたのコードに飛び込み、すべてがどのように整理されているかを理解できますか？コメントで教えてください！