重构CSS以消除“幻数”
我知道神奇的数字是不好的，但我仍然会遇到它们似乎不可避免的时候。我已经创建了一个例子，我希望有人能向我展示如何重构和消除魔术数字。
希望这能帮助我以不同的方式思考未来如何消除它们。
我在CodePen上的例子：http://codepen.io/kevinsperrine/pen/LiGlb
编辑: css文件的第51行包含“魔术数字”。
top: -42px; 编辑2:为了澄清我的问题：WordPress's Style Guide将CSS魔术数字定义为一个一次性用于“修复”(读作:创可贴)问题的数字。我正在询问如何将HTML和CSS都更改为甚至不需要使用-42px。根据我的经验，这种类型的问题似乎经常出现在web开发中，所以我以这个案例为例，希望比我更有经验的人可以重构代码，这样就不需要“魔术数字”了。
回答 4
Stack Overflow用户
发布于 2012-08-25 22:55:19
我已经将代码重构为下面这些部分。本质上，我删除了两个不同的img标记，并将它们作为背景图像包含在类中。这让我可以在搜索模式下将搜索图标的高度设置为相同。单击时，将添加一个活动类，用于更改背景图像和z索引位置，以便两个图像始终位于同一位置。不需要-42px黑客将“活动”映像移回它所属的位置。完整的代码可以在我的original代码本的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;
}Stack Overflow用户
发布于 2012-08-19 09:15:58
看一看LESS:它做的就是这些，而且做得更多。非常好的CSS预处理器。
Stack Overflow用户
发布于 2012-08-19 09:07:01
您可以使用像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 }};
}https://stackoverflow.com/questions/12015888
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号