重构 CSS 以消除“幻数”答案

【问题标题】：Refactor CSS to eliminate "magic numbers"重构 CSS 以消除“幻数”
【发布时间】：2023-03-06 23:29:01
【问题描述】：

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

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

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

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

top: -42px;

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

【问题讨论】：

什么是幻数？ top: -42px;?
@Blender 这些是分配给代码中变量的随机数，没有明确的原因，--但在 css 中它们或多或少是合理的，否则你将有一个 css 文件过度使用变量，在一些情况
幻数：en.wikipedia.org/wiki/…
在这个问题中，我定义幻数的方式是在多个 CSS 样式指南中定义的。参见：Wordpress CSS Style Guide 例如。

标签： html css refactoring magic-numbers

【解决方案1】：

你可以使用像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 }};
   }

【讨论】：

如果您正在考虑使用 PHP 预处理您的 CSS，不妨使用 LESS。
这只是将幻数的定义移动到样式表以外的地方。

【解决方案2】：

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

【讨论】：

是的，我使用较少，但这不是问题的重点。当然，我可以为变量分配 -42px 的值并以这种方式传递它，但这错过了我想要弄清楚的内容。 WordPress's Style Guide 将 CSS 幻数定义为一次性用于“修复”（阅读：创可贴）问题的数字。我在问更多关于如何更改 HTML 和 CSS 甚至不需要使用 -42px;
@KevinPerrine 在这种情况下，您应该告诉我们您尝试使用 -42px 解决的问题是什么。事实上，我已经回答了你提出的问题。
查看answer 了解我是如何解决问题的。
@Julix 您也可以使用预处理器轻松避免它们。你的观点让我无法理解。
那么你应该至少详细说明一下 - 一些定义的幻数是“未命名的” - 即，一旦你声明了一个语义命名的变量并将幻数存储在那里，它现在只是一个自定义值，例如选项或设置，但实际上只是移动到存储幻数的位置。 --- op 使用的定义是：“一次性使用的数字来“修复”（阅读：创可贴）一个问题”----据我所知，这不会消失使用 LESS 或 SCSS。 - 这是一个老问题，但你的答案没有回答。 --- 如何“轻松避免它们”？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

还有那个

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

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

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

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

【讨论】：