重构CSS以消除"神奇数字"

Question

我知道魔术数字是坏的,但我仍然遇到它们似乎不可避免的时代.我创造了一个例子,我喜欢有人向我展示如何重构和消除神奇的数字.

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

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

编辑:css文件的第51行包含"幻数".

top: -42px; 

编辑2:试图澄清我在问什么:WordPress的风格指南定义了一个CSS幻数作为一次性使用的数字来"修复"(读取:创可贴)一个问题.我要求更多关于如何更改HTML和CSS甚至不需要使用-42px.根据我的经验,似乎这些类型的问题经常出现在Web开发中,所以我以这个案例为例,希望比我更有经验的人可以重构代码,这样就不需要"神奇的数字"了.

Answer 1

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