CSSやSVGで大量のマジックナンバーを使用できるのはなぜですか？

しばしば、私のようなホットネットワークの質問リスト上の質問を参照、この基本的には「私はCSSでこの任意の形状を描くんか」尋ねます。常に答えは、要求された形状を形成する一見ランダムにハードコードされた値の束を持つCSSまたはSVGデータのブロックです。

これを見ると、「うん！なんとcodeいコードブロックです。私のプロジェクトでこの種のものを見ないことを願っています。」しかし、私はこれらのタイプのQ＆Aを非常に頻繁に、多数の賛成票で見ているので、明らかにコミュニティはそれらが悪いとは思わない。

しかし、なぜこれが受け入れられるのでしょうか？私のバックエンドの経験から来ると、これは私には意味がありません。では、なぜCSS / SVGで問題ないのでしょうか？

まず、変数または定数を使用することで、プログラミングでマジック値が回避されます。CSSは変数をサポートしていないため、マジック値が眉をひそめていても、選択肢はあまりありません（プリプロセッサをSASSとして使用することを除き、1つのスニペットに対してはそうしません）。

第二に、CSSのようなドメイン固有の言語では、値が魔法のようにならない場合があります。プログラミングでは、マジックナンバーとは、意味や意図が明らかでない番号です。行に次のような場合：

x += 23;

「なぜ23」と尋ねますか？理由は何ですか？変数は意図を明確にすることができます：

x += defaultHttpTimeoutSeconds;

これは、汎用コードでは、1つの数字が絶対に何でも意味する可能性があるためです。ただし、CSSを検討してください。

background-color: #ffffff;
font-size: 16px;

意味は文脈から完全に明確であるため、高さと色は魔法ではありません。そして、設計者が見栄えが良いと思ったため、特定の値を選択する理由は簡単です。とにかく「defaultBackgroundColor」や「defaultFontSize」のような名前を付けるだけなので、変数を導入しても何の助けにもなりません。

これらの形式はコードではなくデータであるため、受け入れられます。すべての「マジックナンバー」を削除すると、基本的にすべてのラベルが複製され、次のようなおかしなファイルになります。

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

一部のデータを変更する必要があるたびに、2つの場所を調べる必要があります。確かに、頻繁に繰り返される色があり、テーマを変更するために変更したい場合など、重複を避けるのが良い状況があります。これらの状況に対処するためのプリプロセッサと提案された拡張機能がありますが、一般的には、データ形式の構造と一緒に数字を持つことが望ましいです。

マジックナンバーの禁止は、この設計原則の基本バージョンです。

1か所で意思決定を行います。

しかし、これらは魔法の数字ではありません。少なくとも、私が知っているコーディングスタイルガイドに関する限りではありません。

幅：200px;
高さ：200px;

それらは明確にラベル付けされています。確かに、数字は偶然同じです。しかし、幅は幅であり、高さは高さです。それらは独立して変化するように設計されています。

今、あなたはすべて5つのオブジェクトがある場合は持っていた同じ幅を有するように、それぞれが独立して私はあなたを打つだろうそれらの幅をハードコード間接スティックを。

それらにラベルが付けられている場合、私はそれらをマジックナンバーとは呼びませんが、私はまだ間接スティックであなたを打ち負かすでしょう。

CSSはプログラミング言語ではないため、代わりに、プログラムの変数データを含む構成ファイルです。

現在、CSSは非常に強力であるため、実際にプログラミングできますが、それはポイントです。本質的には、まだスタイルシート言語です。

一歩後退しましょう。画面に描画できるプログラミング言語があるとします。Webページを描画するようにプログラムしたいと想像してください。

最初は、コードに大量のマジックナンバーを入力します。マージンの幅、テキストの高さ、インデントなど。

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

そのため、マジックナンバーを抽出し、それらをファイルの先頭に配置します。

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

これは少しいです。むしろ、構成ファイルから変数番号を読み取ります。

margin 100
table 500
text size 12

うーん、それは少し不明瞭です...これらの数字はどういう意味ですか？それらの名前はどういう意味ですか？少し形式化しましょう。

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

しかし、ご存知のように、プログラムを少し拡大したいと思います。また、複数のテーブルを含むページ、テーブルを含まないページ、段落またはボタンを含むページなどを描画することも必要です。構成ファイルにセレクターを追加して、より大きなフォントまたは異なるテキスト色を持つ段落を指定できるようにします。ネストされた要素をサポートできます。構成ファイルで一般的なプロパティを使用し、特定のいくつかのネストされた要素に1つ。

これがどこに向かっているのかを感じ、最終的にCSSとして到着します。（そしてそれをレンダリングするブラウザ。）

マジックナンバーを再度回避できるように、構成ファイルに機能を追加する必要がありますか？変数を追加しますか？CSSファイルの構成ファイルを追加しますか？CSSファイルが既にまったく同じ構成ファイルであることを覚えていると、少し無意味に感じます。

しかし、それはもちろん真実ではありません。CSSファイルはどんどん大きくなり、最終的には元のマジックナンバーと同じ問題に遭遇します。同じ番号が場所全体で繰り返され、場合によっては小さな変換などが発生します。

ただし、最新のCSSでは、この繰り返しを回避する多くの方法が許可されています。多くの要素に適用されるクラスを使用でき、すべてdivのsにスタイルを設定できますが、特定の1つをオーバーライドできます。CSS3では、ある種の変数の使用も許可されます。

これは、可能なすべての場所でCSS変数の使用を開始する必要があるという意味ではありません。理にかなっている場所で使用し、重複を避けたり、他の手法も利用できない場合に使用します。

最終的には、構成ファイルにあまりにも多くのマジックナンバーが必要ではありません:-)

CSS / SVGで[一見ランダムに見えるハードコーディングされた値の束]がOKなのはなぜですか？

大丈夫ではありません。それはだ可能無地「の.css」ファイルを作成し、維持するために、最終的にランダムハードコードされた値は、流行の負担となります。

非常に単純なWebページ以外の場合は、統制のとれた「検索と置換」戦略を開発するか、変数を使用してCSSプリプロセッサーを使用するか、JavaScriptでスタイルを定義する必要があります。