web-dev-qa-db-ja.com

CSSやSVGで大量のマジックナンバーが受け入れられるのはなぜですか？

this のようなHot Network Questionsリストに、「CSSでこの任意の形状をどのように描画するのか」という質問がよくあります。常に答えは、要求された形状を形成する一見ランダムなハードコードされた値の束を持つCSSまたはSVGデータのいくつかのブロックです。

これを見ると、「ヤック！なんと醜いコードブロックか。私は自分のプロジェクトでこのタイプのものを見たことがないことを願っています。ただし、これらのタイプのQ＆Aは非常に頻繁に見られ、多数の賛成票が寄せられているため、コミュニティーはこれらのQ＆Aが悪いとは考えていません。

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

coding-stylecode-qualitycssclean-codesvg
63
David says Reinstate Monica

第一に、変数または定数を使用することにより、プログラミングでマジック値が回避されます。 CSSは変数をサポートしていないため、魔法の値が不快になったとしても、選択肢はあまりありません（プリプロセッサーをSASSとして使用する場合を除いて、単一のスニペットに対してはそうしません）。

第2に、CSSのようなドメイン固有の言語では、値はそれほど魅力的ではないかもしれません。プログラミングでは、マジックナンバーとは、意味や意図が明確ではない数字のことです。行が言う場合：

x += 23;

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

x += defaultHttpTimeoutSeconds;

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

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

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

117
JacquesB

これらの形式はcodeではなく、dataであるため許容されます。すべての「マジックナンバー」を削除すると、基本的にすべてのラベルが複製され、次のようなとんでもないファイルが作成されます。

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

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

80
Karl Bielefeldt

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

一箇所で決定を下す 。

しかし、 これらはマジックナンバーではありません 。少なくとも、私が知っているコーディングスタイルガイドに関する限りではありません。

幅：200px;
高さ：200px;

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

すべてのhadが同じ幅で、それぞれが独立して幅をハードコーディングした5つのオブジェクトがある場合、 indirection スティックで打ち負かします。

ラベルが付いている場合は、マジックナンバーとは呼びませんが、 indirection スティックを使用して、あなたを倒します。

25
candied_orange

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では、この繰り返しを回避するための多くの方法が可能です。多くの要素に適用されるクラスを使用でき、すべてのdivsにスタイルを設定できますが、具体的には1つをオーバーライドできます。CSS3では、ある種の変数の使用も可能です。

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

最後に、設定ファイルにあまり多くのマジックナンバーを入れたくないでしょう:-)

10
Dorus

CSS/SVGで[一見ランダムにハードコードされた値の束]で問題ないのはなぜですか？

それは大丈夫ではありません。プレーンな「.css」ファイルを書き込んで維持するのは可能ですが、最終的にランダムにハードコードされた値が一般的な負担になります。

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

5
Jackson