CSS 中的百分比：你用错了

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

……如果你按照我接下来要解释的方法去做。

这篇文章的起因是一位同事写了这样一段话：

.foo {
  background-position: 83% 10%;
}

我当时就想：“啊？什么？”

当然，我当时完全不知道那里发生了什么。直到项目上线后，我才隐约明白代码的意图：他们要把一张图片精确地定位在容器右半部分的中间……而且距离顶部10%，为什么不呢？

这让我给他们提出了我通常会给新手的建议：

如果你使用的百分比不是 100% 或 50%，那么可能还有更好的方法。

关键在于，“100%”通常表示“完全”，“50%”表示“一半”。（注：我没有包括0%，因为你应该用0代替，但意思是一样的。）任何其他数值——包括一些看似“容易”的数值，比如25%、33%或10%——都更难识别和理解。

如果我需要这个值怎么办？

当然，这个值可能完全合理，是经过精心计算的结果——尽管以我的经验来看，它通常是反复试验的结果😅（例如：“这个值看起来怎么样？嗯，不太好，我再加1%……”）。

幸运的是，我们有很多工具可以帮助我们编写更清晰的代码，并准确传达其含义。如果您使用像 SASS 或 LESS 这样的预处理器，通过合理使用命名清晰的变量，就可以完全避免使用“魔法数字” 。

在上述示例中，目标是将一张图片水平居中放置在容器的右半部分，图片宽度为容器宽度的 25%。剩下的 10% 大约是页眉的高度。因此，理想情况下，代码应该如下所示：

$header-height: 8rem;
$image-width: 25%;

.foo {
  $bg-position-x: 100% - 50 * $image-width / (100% - $image-width);
  background-position: $bg-position-x $header-height;
}

这方面还有改进的空间（背景图片的定位方式并不像想象中那么简单），但至少可以确定图片的位置取决于其宽度，并且给出了正确的值（83.3333...%）。

即使不使用预处理器，您仍然可以使用普通的 CSS，因为calcCSS 自定义属性现在已得到广泛支持：

:root {
  --header-height: 8rem;
  --image-width: 25;
}
.foo {
  --bg-position-x: calc(100% - 50% * var(--image-width) / (100 - var(--image-width)));
  background-position: var(--bg-position-x) var(--header-height);
}

如果需要支持 Internet Explorer……为什么不使用预处理器呢？😱

结论

请使用有意义的变量名，并且体谅一下那些维护你代码的人😄