我知道幻数很糟糕，但我仍然会遇到它们似乎不可避免的时候。我已经创建了一个示例，我希望有人能向我展示如何重构和消除幻数。
希望这能帮助我以不同的方式思考如何在未来消除它们。
我在CodePen上的示例：http://codepen.io/kevinsperrine/pen/LiGlb
编辑：css文件的第51行包含"幻数"。
top: -42px;
编辑2：为了澄清我的问题：WordPress的风格指南将CSS幻数定义为一次性用于"修复"（读作：创可贴）问题的数字。我正在询问更多关于如何更改HTML&CSS甚至不需要使用-42px。根据我的经验，这类问题似乎经常出现在网络开发中，所以我用这个例子希望有比我更有经验的人可以重构代码，这样就不需要"神奇的数字"了。
看看LESS：它确实做到了这一点，而且做得更多。非常好的CSS预处理器。
我已经将代码重构为以下部分。从本质上讲，我删除了两个不同的img标记，并将它们作为背景图像包含在类中。这使我可以在搜索模式中将搜索图标的高度设置为相同。单击时，会添加一个活动类，该类会更改背景图像和z索引位置，从而使两个图像始终位于同一位置。不需要-42px的破解来将"活动"图像移回它所属的位置。完整的代码可以在我的原始代码笔的分叉中获得。
<! --- 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;
}
您可以使用类似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>
或者你可以用树枝。----------------mystyle.titch.hrml
{% set magic=-42 %}
.search-model{
top: {{ magic }};
}
Chris Coyier在这篇文章中http://css-tricks.com/magic-numbers-in-css/解释了在CSS中，幻数：
"它们通常总是以某种方式与字体相关"
以及
CSS中的幻数指的是在某些情况下"有效"的值，但当这些情况发生变化时，这些值很脆弱，容易崩溃
在你的例子中，-42可能没有想象中那么邪恶。问题是，当页面缩放或字体类型发生变化时，它会中断吗？我改变了变焦，没有什么不好的事情发生。
@Kevin Perrine版本可能更适合imgs布局，但看起来模态容器比原始版本更高。如果你想把它放在一个较低的位置，那么你可以把一些容器的顶部属性设置为任何适合你需要的数字，甚至是一个没有四舍五入的数字42。
当然，如果有一种方法可以防止使用随机数，那就是