命名字体大小变量的难题

通常，一个项目将有一组预先确定的字体大小，通常以某种方式命名的变量，试图寻求某种秩序和一致性。 任何规模较大的项目都可以使用这样的东西。 始终有标题、段落、列表等。 你可以在任何地方直接明确地设置字体大小（例如 font-size: 18px）。 原始 CSS，就其本身而言。 我偶尔会看到这种情况——不仅混合大小，而且还混合像 px、rem 和 em 这样的单位，毫无章法地混乱无序。

这就是为什么项目的 CSS 通常使用变量或 mixin——我们正在寻求结构、可维护性和最终的一致性。 我们都知道命名很困难，看看命名字体大小变量就知道了。 我们应该如何命名一个小字体大小变量，以便清楚地表明它比一个大字体大小变量小？ 如果我们需要在它们之间插入一个新的变量怎么办——这个变量的命名是否清楚地解释了它与其他大小变量的关系？

我们将在本文中继续讨论命名字体大小变量。 但实际上，这个问题超出了字体大小，涵盖了任何类型的大小或长度值。 考虑填充、边距、宽度、高度、边框半径等。 这些东西也需要结构和一致性！

您如何在项目中定义字体大小？ 它是否使用自定义变量看起来像这样

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

或者可能在 Sass 中（我们将在本文中始终使用它）您可能有 $small、$medium 和 $large 字体大小的变量。

很好。 过了一段时间，假设设计师添加了一个新的 <h1> 标题用于英雄部分。 而且它非常大。 比你在项目中拥有的任何东西都大。 没问题，你会回答。 你向项目中添加一个 $xlarge，然后继续你的一天。

第二天，设计师制作了一个不错的表单标签，它再次具有新的字体大小。 然而，这个新大小，虽然比小大，但比中等小。

我们开始吧。

你应该叫它什么？ $small-medium？ $small-2？ $smedium？ 无论你叫它什么，你都不会满意。 因为没有这个词。

或者你应该重构它吗？ 创建一个新的 $xsmall，并将所有 $small 实例更改为 $xsmall？ 然后你可以将 $small 用于表单标签？ 有一个小的风险，即你可能会忘记更改某个地方，嘿，瞧：一个错误。 下次发生什么，当引入比 $medium 变量值更大的大小时？ 我们必须重构 $large 和 $xlarge 吗？

我建议始终遵循一个比例。 一个简单的解决方法是进一步抽象，也许放弃数字和大小，转而使用功能性名称，例如 $form-label 而不是 $small-2 或 $xsmall。

但想象一下拥有一组这样的字体大小

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

这是一个破损的比例。 它将大小概念和组件概念混合在一起。 它引发了问题。 警报或按钮是否允许使用 $form-label？ 太糟糕了。

也许你在进行希腊语命名，将变量命名为 $alpha、$beta、$gamma？ 那么让我问你，什么比 $alpha 大？ $alpha-large？ 或者等等，$alpha 是小的吗？

我还见过像 $button-font-size、$label-font-size、$blockquote-font-size 这样的名称。 在我看来，这就像每个元素使用一个变量，而不是一个比例，而且听起来如果在多个地方使用相同的值，但使用不同的名称，可能会产生很多重复代码。

也许你正在使用一个基本字体大小和仅百分比？ 当然，但我认为你需要百分比的变量。 这就是 Geoff 处理字体大小的方式，甚至他承认这种设置让他自己也皱起了眉头。 使用主观命名的变量进行计算可能对你来说很清楚，但对于任何跳入项目的人来说，看起来很疯狂而且很复杂。

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

我们需要一个更好的系统

不断添加和删除内容是我们想要的工作方式。 这是现代的开发——MVP、敏捷以及所有其他热门流行语。

我们需要的是一个比例语法，它允许有改变的余地。 向比例添加新的尺寸应该很容易，不会引入破坏性更改。 我正在考虑一种既灵活又无限的比例。 它必须比 $small、$medium 和 $large 更复杂。

它还应该是描述性和直观的。 最好，你不必在设置文件或配置中查找变量名，或者无论你在哪里存储这些东西。 我一点都不知道 $epsilon 是在 $sigma 之前还是之后。 你知道吗？

使用现有系统

在尝试发明新的东西之前，是否存在我们可以利用的现有语法或系统？ 以下是我遇到的几个。

国际 单位 系统

当然，您熟悉“千字节”和“兆字节”之类的术语。 欧洲人非常习惯“毫米”和“厘米”。 其他例子是“吉加”、“太拉”和“拍”。 这些前缀可用于长度、重量、体积等。 $centi 字体大小可以工作吗？ 在一定程度上，它很直观，也就是说，如果您熟悉公制系统。 这是一个有限的比例。 而且没有空间添加新的尺寸，因为它们已经设置好了。

传统磅值名称

在计算机和桌面出版问世之前很久，书籍和报纸都是用铅字印刷的。 排字工人对不同的尺寸有不同的名称。 这些尺寸参考了一个磅值（pt），理论上可以用于像素尺寸（px）。

这个系统中的字号被称为“小字”、“磅值”、“西塞罗”和“大字”，仅举几例。 这些名称因大陆和国家而异。 此外，同一个名称可能有不同的尺寸，所以……相当混乱。

也就是说，我确实喜欢这个系统，因为它就像是对过去时代古老工艺的尊重。 但这些名称太奇怪了，而且专门用于字号，所以将它用于断点和间距似乎有点牵强。

将日常物品放在比例尺上

如何使用我们日常生活中的东西？ 比如辣椒。

有很多种辣椒。 $habanero 比 $cayenne 辣，$cayenne 比 $jalapeno 辣。 那将很有趣，是吗？

但是，尽管我喜欢写 font-size: $tabasco 的想法，但我看到了两个问题。 如果你不喜欢辣椒，你就无法知道哪种辣椒比另一种辣椒更辣——所以，它不是普遍直观的。 此外，甜椒在史高维尔辣度单位上为 0，没有比这更低的。 卡罗来纳死神是世界上最辣的辣椒，所以这个比例是有限的。

是的，辣椒从比例上来说不是更大或更小，而是更辣。 糟糕的概念。 也许更常见的东西，比如球的类型？

有很多种不同的球。 你有手球、足球、排球等。 需要比药球更大的东西吗？ 使用 $beach。 比网球小的东西？ 使用 $pingpong。 这非常直观，因为我想每个人都在某个时候玩过各种球，或者至少从体育运动中熟悉它们。

但乒乓球比高尔夫球大吗？ 谁知道呢？ 此外，保龄球和足球实际上是同样大小。 所以……同样，并不完美。

扩展到行星可能行得通，但你需要精通天文学。

如何直接使用数字？ 我们无法单独使用数字，因为像stylelinter 这样的工具会提出异议。 但像这样可以工作吗

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

嗯，它是无限的，因为总有空间可以添加新内容。但它也非常具体，而且将实际值作为名称的一部分有一些缺点。假设 $font-18 在很多地方使用。现在，他们说，所有使用 18px 的地方都要改成 19px（因为某些原因）。现在我们需要将变量从 $font-18 重命名为 $font-19，然后将 $font-19 的值从 18px 改成 19px。在我们最终将所有使用 $font-18 的地方更新到 $font-19 之前，这就是我们要做的。这几乎就像使用原始 CSS 一样。可维护性得分很低。

动物界怎么样呢？

大自然在这个地球上提供了无数的物种，这对这种情况很有帮助。想象一下这样的情况

$mouse: 12px;
$dog: 16px;
$hippo: 24px;

需要比老鼠更小的东西？使用 $bee、$ant 或 $flea。比熊大？尝试 $moose 或 $hippo。比大象更大？好吧，你有 $whale，或者，我们可以回到史前时代，使用 $t-rex。这里总有动物可以挤进来。非常灵活，非常直观，也是无限的（几乎）。而且也很有趣——我不介意使用 font-size: $squirrel。🤩

但话说回来，即使那样也可能需要引用变量，除非我们确切地知道我们的字体大小动物园中包含哪些动物。但也许这不是什么大问题，只要它能够扩展。

我已经花了太多时间思考这个问题了

或者我没有？代码库是你花费工作时间的地方。它是你的工作环境，就像椅子和显示器一样。工作场所应该是一个不错的地方。

你如何处理你的字体大小比例？你有一个系统用于字体，另一个系统用于边距等？任何人都可以跳进你的代码并理解所有内容是如何组织的吗？请在评论中告诉我！