在 CSS 中保留数学运算

我同意将数学计算留在 CSS 中是一个好主意。 这适用于您可以在编写时计算的数学运算，但专门选择不计算。 例如，如果您需要一个 7 列的基于浮动的网格（别问），它更干净、更直观

.col {
  /* groan */
  width: 14.2857142857%;

  /* oh, I get it */
  width: calc(100% / 7);
}

您可能可以证明 calc() 使计算机慢了 0.0000001%，因此出于性能原因，明确定义宽度在技术上更快 - 但这相当于不使用标点符号来节省 HTML 的重量。

随着您的继续，这些数学运算可能会变得更加复杂。 例如，就像我们在 calc() 用例 文章中一样，那个 7 列网格中的跨列怎么办？

.column-1-7 {
   width: calc(100% / 7);
}

.column-2-7 {
   width: calc(100% / 7 * 2);
}

.column-3-7 {
   width: calc(100% / 7 * 3);
}

我认为这相当干净易读且易于管理。

如果数学运算过于复杂，可以通过注释来提高可读性。 假设您正在尝试为元素内部的基于边距的间距和填充进行调整

.parent {
  width: 600px;
  padding: 18px;
}

.left {
  /* base width - 1/2 horizontal padding */
  width: calc(400px - 18px);
  margin-right: 1rem; /* gutter */
}

.right {
  /* base width - 1/2 horizontal padding - gutter */
  width: calc(200px - 1rem - 18px);
}

再说一遍，我认为这非常易读，但它也是大量的重复。 这可能需要使用变量。 为了有趣，我们将在 CSS 自定义属性中使用它。 您必须选择值得使用变量的元素和不值得的元素。 随着代码变得自文档化，您可能需要更少的注释

.parent {
  --padding: 18px;
  --gutter: 1rem;
  
  width: 600px;
  padding: var(--padding);
}

.left {
  width: calc(400px - var(--padding));
  margin-right: var(--gutter);
}

.right {
  width: calc(200px - var(--gutter) - var(--padding));
}

对我来说，这是一个不错的平衡。 以下是更进一步的步骤

.parent {
  --padding: 18px;
  --gutter: 1rem;
  --parentWidth: 600px;
  --leftSize: 2/3;
  --rightSize: 1/3;
  
  width: var(--parentWidth);
  padding: var(--padding);
}

.left {
  width: calc(calc(var(--parentWidth) * var(--leftSize)) - var(--padding));
  margin-right: var(--gutter);
}

.right {
  width: calc(calc(var(--parentWidth) * var(--rightSize)) - var(--gutter) - var(--padding));
}

每个数字都在其中被赋予了一个变量。 太远了？ 也许吧。 这当然使得那些宽度声明很难快速理解。 Ana Tudor 使用 calc() 做了一些非常严肃的事情，作为每个人对这些东西的舒适程度不同的证明。

让我想到这一切的一件事是 James Nash 最近的一篇文章 - “Hardcore CSS calc()” - 其中他构建了这个

虽然该解决方案走了一条非常依赖数学运算的道路，但最终它只在旧的复杂度计上是有点中等水平的计算。 并且请注意，并非所有内容都获得变量，只有最常重用的部分

查看 Pen 流体 1 + 2 缩略图块 由 James Nash (@cirrus) 在 CodePen 上创建。