6

魔法数が悪いことは知っていますが、やむを得ない場合もあります。マジックナンバーをリファクタリングして排除する方法を誰かに教えてもらいたい例を作成しました。

うまくいけば、これは私が将来それらを排除することについて違った考え方をするのに役立つでしょう。

CodePenに関する私の例：http：//codepen.io/kevinsperrine/pen/LiGlb

編集：cssファイルの51行目に「マジックナンバー」が含まれています。

top: -42px;

編集2：私が求めていることを明確にするために：WordPressのスタイルガイドは、CSSマジックナンバーを、問題を「修正」（読み取り：バンドエイド）するために1回限り使用される番号として定義しています。-42pxを使用する必要さえないようにHTMLとCSSの両方を変更する方法についてもっと質問しています。私の経験では、この種の問題はWeb開発で頻繁に発生するようです。そこで、コードをリファクタリングできるよりも経験豊富な人が「魔法の数字」を必要としないことを期待して、このケースを例として使用しました。

4

4 に答える 4

2

LESSを見てください：それはまさにこれとはるかに多くのことをします。CSS用の非常に優れたプリプロセッサ。

于 2012-08-19T01:15:57.887 に答える
1

以下のこれらの部分にコードをリファクタリングしました。基本的に、2つの異なるimgタグを削除し、それらをクラスの背景画像として含めました。これにより、検索モーダルで検索アイコンの高さが同じになるように設定できます。クリックすると、背景画像とz-index位置の両方を変更するアクティブなクラスが追加され、両方の画像が常に同じ場所に配置されます。-42pxハックで、「アクティブな」画像を元の場所に戻す必要はありません。完全なコードは、私の元のcodepenのフォークで入手できます。

<! --- HTML -- >
<div class="search-modal-container">
    <a id="search" class="search" href="#search" data-target=".search-modal"><i class="icon icon-20 icon-search"></i></a>
    <div class="search-modal is-hidden">
      <div class="search-modal-input">
        <form action="" method="post">
          <input type="text" value="" placeholder="Search">
          <input type="submit" value="GO" class="btn btn-primary btn-full">
        </form>
      </div>
    </div>
</div>

CSS（Less）は次のようになります。

/* CSS */
.search-modal-container {
  float: right;
  position: relative;

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.search-modal {
    background-color: @menu-background-color;
    height: 100px;
    min-width: 325px;
    position: absolute;
    right: 0;
    z-index: @zindexModal;
    box-shadow: 1px 5px 4px @background-color;
    border-radius: 2px;
}

.is-hidden {
    display: none; 
}

.search {
  float: right;
}

.icon-search {
  width: 20px;
  height: 100px;
  display: block;
  background: url("http://c3.goconstrukt.com/img/search.png") no-repeat center center;
}

.icon-search.is-active {
  position: relative;
  z-index: @zindexModal + 1;
    background: @background-color url("http://c3.goconstrukt.com/img/search-active.png") no-repeat center center;

      &:after {
        content: '';
            width: 0;
            height: 0;
            border-width: 50px 15px 50px 0;
            border-style: solid;
            border-color: transparent @background-color;
        position: absolute;
        right: 100%;
    }
}

.search-modal-input {
    padding: 0.75em;
    float: left;
}
于 2012-08-25T14:55:19.333 に答える
0

phpのようなプログラミング言語を使用して以下を取り除くことができますmagic numbers：

----------------- mystyle.php

<?php const magic=-42; ?>
      .search-modal{
        top: <?php echo magic; ?>
      }

---------------- index.php

<head>
 <style>
   <?php include 'mystyle.php'; ?>
 </style>
</head>
<body></body>

または、小枝を使用することもできます。---------------- mystyle.twig.hrml

{% set magic=-42 %}
   .search-model{
       top: {{ magic }};
   }
于 2012-08-19T01:07:01.287 に答える
0

この投稿http://css-tricks.com/magic-numbers-in-css/のChrisCoyierは、CSSでは魔法数について次のように説明しています。

「それらは通常、何らかの形で常にフォントに関連しています」

そしてそれ

「CSSの魔法数は、特定の状況では「機能する」が、そのような状況が変化すると脆弱で壊れやすい値を指します。」

あなたの例では、-42は思ったほど邪悪ではないかもしれません。問題は、ページのズームやフォントの種類によって何かが変わると壊れますか？ズームを変更しましたが、何も悪いことはありませんでした。

@Kevin Perrineバージョンはimgsレイアウトに適している可能性がありますが、モーダルコンテナが元のバージョンよりも高いように見えます。低い位置に配置したい場合は、コンテナのtopプロパティを、必要に応じた任意の数値に設定できます。丸められていない数値は42に設定できます。

しかしもちろん、乱数の使用を防ぐ方法があれば、それが方法です

于 2014-08-04T10:08:46.257 に答える