6

我知道幻数很糟糕，但我仍然会遇到它们似乎不可避免的时候。我创建了一个示例，希望有人向我展示如何重构和消除幻数。

希望这将帮助我以不同的方式思考未来消除它们。

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

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

top: -42px;

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

4

4 回答 4

2

看看LESS：它确实做到了这一点，而且还有更多。非常好的 CSS 预处理器。

于 2012-08-19T01:15:57.887 回答
1

我已将代码重构为下面的这些部分。本质上，我删除了两个不同的 img 标签，并将它们作为背景图像包含在类中。这让我可以将搜索图标的高度设置为在搜索模式中相同。单击时，将添加一个活动类，该类会更改背景图像和 z-index 位置，以便两个图像始终位于同一位置。无需 -42px hack 将“活动”图像移回它所属的位置。完整的代码可以在我原来的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

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

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

然后

“CSS 中的幻数指的是在某些情况下“有效”但在这些情况发生变化时脆弱且容易中断的值”

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

@Kevin Perrine 版本可能更适合 imgs 布局，但看起来模态容器高于原始版本。如果您想将它放在较低的位置，那么您可以将某个容器的 top 属性设置为适合您需要的任何数字，甚至是 42 等不四舍五入的数字。

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

于 2014-08-04T10:08:46.257 回答
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>

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

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