html - 重构 CSS 以消除 "magic numbers"

Question

我知道魔数(Magic Number)不好，但我还是会遇到它们似乎不可避免的时候。我创建了一个示例，希望有人能向我展示如何重构和消除魔数(Magic Number)。

希望这能帮助我以不同的方式思考 future 消除它们的问题。

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

编辑:css 文件的第 51 行包含“魔数(Magic Number)”。

top: -42px; 

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

Answer 1

看看 LESS:它确实做到了这一点以及更多。非常好的 CSS 预处理器。