重构CSS以消除“幻数” [英] Refactor CSS to eliminate "magic numbers"

问题描述

我知道魔法数字不好，但我仍然遇到过似乎无法避免的时代。我创建了一个例子，我希望有人向我展示如何重构和消除幻数。

I know magic numbers are bad, but I still come across times when they seem unavoidable. I've created an example that I'd love for someone to show me how to refactor and eliminate the magic number.

希望这会帮助我思考消除他们在未来。

Hopefully, this will help me think differently about eliminating them in the future.

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

My example on CodePen: http://codepen.io/kevinsperrine/pen/LiGlb

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

Line 51 of the css file contains the "magic number".

top: -42px; 

编辑2：
为了澄清我所问的内容： WordPress的风格指南将CSS幻数定义为使用的数字在一次性的基础上解决（阅读：创可贴）一个问题。我正在询问更多关于如何更改HTML& CSS甚至不需要使用-42px。根据我的经验，似乎这些类型的问题经常出现在Web开发中，所以我以这种情况为例，希望有人比我更有经验可以重构代码，以便不需要幻数。 / p>

Edit 2: In an attempt to clarify what I'm asking: WordPress's Style Guide defines a CSS magic number as a number that's used on a one-off basis to "fix" (read: band-aid) a problem. I'm asking more on how to change both the HTML & CSS to not even need the use of the -42px. In my experience, it seems these types of problems arise often in web development, so I used this case as an example in hopes that someone more experienced than I can refactor the code, so that the "magic numbers" aren't needed.

推荐答案

我将代码重构为以下这些部分。本质上，我删除了两个不同的img标签，并将它们作为背景图像包含在类中。这可以让我在搜索模式下将搜索图标的高度设置为相同。单击时，会添加一个活动类，以更改背景图像和z-index位置，以便两个图像始终位于同一位置。不需要-42像素的黑客将活动图像移回到它所属的位置。完整的代码位于我的分支中。

I've refactored the code into these parts below. Essentially, I removed the two different img tags, and included them as background images on classes. This lets me set the height of the search icon to be the same at the search modal. When clicked, an active class is added that changes the both the background image, and the z-index position, so that both images are always in the same place. No need for the -42px hack to move the "active" image back up to where it belongs. The full code is available in a fork of my original 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）现在看起来像这样：

The CSS (Less) now looks like this:

/* 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;
}

这篇关于重构CSS以消除“幻数”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！