Question

我知道魔术数字不好，但是当他们看起来不可避免的时候我仍然会遇到。我创造了一个例子，我喜欢有人向我展示如何重构和消除幻数。

希望这有助于我对将来消除它们有不同的看法。

我在CodePen上的示例：http://codepen.io/kevinsperrine/pen/LiGlb

编辑： css文件的第51行包含“幻数”。

top: -42px;

编辑2：为了澄清我的要求：WordPress's Style Guide将CSS幻数定义为一次性使用的数字，以“修复”（读取：创可贴）问题。我要求更多关于如何更改HTML和＆amp; CSS甚至不需要使用-42px。根据我的经验，似乎这些类型的问题经常出现在Web开发中，所以我以这个案例为例，希望比我更有经验的人可以重构代码，这样就不需要“神奇的数字”。 / p>

Answer 1

看看LESS：它确实如此，以及更多。非常好的CSS预处理器。

Answer 2

我已将代码重构为以下部分。基本上，我删除了两个不同的img标签，并将它们作为背景图像包含在类中。这使我可以在搜索模式中将搜索图标的高度设置为相同。单击时，会添加一个活动类，它会更改背景图像和z-index位置，以便两个图像始终位于同一位置。无需-42px hack将“活动”映像移回其所属的位置。我的fork代码集original中提供了完整的代码。

<! --- 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;
}

Answer 3

您可以使用像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>

或者您可以使用twig。 ----------------的 mystyle.twig.hrml

{% set magic=-42 %} .search-model{ top: {{ magic }}; }

Answer 4

Chris Coyier在这篇文章http://css-tricks.com/magic-numbers-in-css/中解释说，在CSS中，幻数：

“它们通常总是以某种方式与字体相关”

那个

“CSS中的魔术数字指的是在某些情况下”有效“但在这些情况发生变化时容易破裂的值”

在你的例子中，-42可能不像想象的那么邪恶。问题是，当页面缩放或字体类型发生变化时，它是否会中断？我改变了变焦，没有发生任何不好的事。

@Kevin Perrine版本对于imgs布局可能更好，但看起来模态容器高于原始版本。如果你想把它放在较低的位置，那么你可以将某个容器的top属性设置为任何符合你需要的数字，即使是没有舍入的数字为42。

但是，当然，如果有办法防止使用随机数，那就是要走的路了

重构CSS以消除“神奇数字”

4 个答案: