Html 重构CSS以消除；“幻数”；_Html_Css_Refactoring_Magic Numbers

Html 重构CSS以消除；“幻数”；

html css

Html 重构CSS以消除；“幻数”；,html,css,refactoring,magic-numbers,Html,Css,Refactoring,Magic Numbers,我知道魔法数字很糟糕，但我仍然会遇到它们似乎不可避免的时候。我已经创建了一个例子，我希望有人能告诉我如何重构和消除这个神奇的数字 top: -42px; 希望这能帮助我以不同的方式思考如何在未来消除它们我在CodePen上的示例：编辑： css文件的第51行包含“幻数” 编辑2：为了澄清我的问题：将CSS幻数定义为一次性用于“修复”（阅读：创可贴）问题的数字。我想了解更多关于如何将HTML和CSS都更改为不需要使用-42px的内容。根据我的经验，这些类型的问题似乎在web开发中经常出现

我知道魔法数字很糟糕，但我仍然会遇到它们似乎不可避免的时候。我已经创建了一个例子，我希望有人能告诉我如何重构和消除这个神奇的数字

top: -42px;

希望这能帮助我以不同的方式思考如何在未来消除它们

我在CodePen上的示例：

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

编辑2：

为了澄清我的问题：将CSS幻数定义为一次性用于“修复”（阅读：创可贴）问题的数字。我想了解更多关于如何将HTML和CSS都更改为不需要使用-42px的内容。根据我的经验，这些类型的问题似乎在web开发中经常出现，因此我以这个案例为例，希望比我更有经验的人能够重构代码，这样就不需要“幻数”。

您可以使用php之类的编程语言来摆脱幻数：

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

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

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

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

我已经将代码重构为以下部分。本质上，我删除了两个不同的img标记，并将它们作为背景图像包含在类中。这使我可以在搜索模式中将搜索图标的高度设置为相同。单击时，将添加一个活动类，该类将同时更改背景图像和z索引位置，以便两个图像始终位于同一位置。无需-42px黑客将“活动”图像移回其所属位置。完整的代码可以在我的代码笔中找到

Chris Coyier在本文中解释了CSS中的神奇数字：

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

那

CSS中的幻数是指在某些情况下“起作用”，但在这些情况发生变化时很脆弱且容易破裂的值

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

@Kevin Perrine版本可能更适合imgs布局，但请注意模态容器高于原始版本。如果您想将其放在较低的位置，那么可以将某个容器的top属性设置为适合您需要的任何数字，甚至可以将非整数设置为42

但是，当然，如果有一种方法可以防止使用随机数，那就是方法

什么是幻数<代码>顶部：-42px？@Blender这些是在代码中分配给变量的随机数，没有明确的原因，--但是在css中它们或多或少是合理的，否则你会有一个css文件过度使用变量，在某些情况下没有真正的可读性magic number：在这个问题中，我定义了魔法数字，就像它们在多个css样式指南中定义的那样。请参阅：例如，如果您正在考虑使用PHP预处理CSS，不妨少用一些。这只是将幻数的定义移动到样式表以外的其他位置。是的，我用的更少，但这不是问题的重点。当然，我可以指定一个变量-42px的值，并以这种方式传递它，但这忽略了我想要了解的内容。将CSS幻数定义为一次性用于“修复”（阅读：band aid）问题的数字。我想了解更多关于如何将HTML和CSS都更改为不需要使用-42px@KevinPerrine在这种情况下，您应该告诉我们您试图用-42px解决的问题是什么。事实上，我已经回答了你提出的问题。看看我是如何解决这个问题的。@Julix，你也可以很容易地用预处理器避免它们。我不明白你的意思。那么你应该至少详细说明一下——有些定义中的幻数是“未命名的”——即，一旦你声明了一个语义命名的变量并将幻数存储在那里，它现在只是一个自定义值，比如选项或设置，但实际上它只是移动到存储幻数的地方。--op使用的定义是：“一次性用于“修复”（阅读：创可贴）问题的数字”——据我所知，这并不仅仅是因为使用较少或SCS这是个老问题，但你的回答没有回答如何“容易避免它们”？

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

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