通常，一个项目将具有一组预先确定的字体大小，通常为变量，以寻求某种秩序和一致性的方式命名。任何相当大的项目都可以使用类似的项目。总是有标题，段落，列表等。您可以明确，直接设置字体大小（例如字体大小：18px）。原始CSS。我确实偶尔会看到 - 不仅要混合大小，还混合了诸如PX，REM和EM等单元。 这就是为什么项目的CSS通常使用变量或混合素的原因 - 我们正在为结构，可维护性以及最终的一致性拍摄。我们都知道命名很难，而且比命名字体尺寸变量来了解原因并不多。我们应该如何命名一个小字体尺寸变量，以便显然它小于大字体尺寸变量？如果我们需要在它们之间插入一个新变量，会发生什么 - 那是一个清楚地解释其与其他大小变量的关系的方式？

我们将继续讨论这篇文章中字体大小变量的命名。但是，实际上，该问题超出了字体大小到任何形式的尺寸或长度值。想想桨，边距，宽度，高度，边界半径等。这些东西也需要结构和一致性！

如何在项目中定义字体大小？它看起来像这样的自定义变量：

：根 { / *字体大小变量 */ - 小：12px; - 中等：16px; - 大：24px; }

美好的。过了一会儿，假设设计师添加了一个新的

，则为英雄部分。它是

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

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

开始了。 你应该怎么称呼它？ $中小型？ $ Small-2？ $ smedium？无论您命名如何，您都不会对此感到满意。因为没有这个话。

，或者您应该重构吗？创建一个新的$ XSMALL，然后将$ SMILL的所有实例更改为$ XSMALL？然后，您可以将$ SMILL用于表单标签？您会忘记在某个地方更改的风险很小，嘿，Presto：一个错误。下次会发生什么，当引入大小大于$ Medium Variable值的东西时会发生什么？我们还必须重构$大和$ xlarge吗？

我建议始终遵守规模。一个简单的修复方法是进一步抽象，也许抛弃数字和大小支持功能名称，例如$ form-label而不是$ small-2或$ xsmall。

，但想象一下具有这样的字体大小：

这是一个损坏的比例。这是一个尺寸概念，一个组件概念混合在一起。它提出了问题。是否应该允许警报或按钮使用$表格标签？ yuck。

也许您有一件希腊的事情，命名变量$ alpha，$ beta，$ gamma？然后让我问你，那是什么大于$ alpha？ $ alpha-large？还是等待，$ alpha是

small

一个？

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

也许您只使用一种基本字体大小和百分比？当然，但是我想说您需要变量以达到百分比。这就是杰夫（Geoff）处理字体尺寸的方式，甚至他也承认该设置会引起自己的眉毛。用主观命名变量的计算可能对您来说很清楚，但对于其他任何人跳入项目的人来说都是疯狂的，而且很复杂。

h1 { 字体大小：夹具（var（-text-size-large），calc（var（-text-size-base） * var（ - text-size-scaler）），var（-text-size-huge））; }

我们需要一个更好的系统 不断添加和删除东西

工作的方式。这是现代发展 - MVP

我们需要的是一个比例语法，它允许更改空间。在不引入破坏变化的情况下，在规模上添加新尺寸应该很容易。我正在考虑一种既定比例，既是

和

的比例。它必须比$ small，$中和$大。

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

intuitive

。最好是，您不必在设置文件或配置中查找变量名称，或者在存储这些内容的任何地方。如果$ epsilon出现在$ sigma之前或之后，我没有任何线索。你？

使用现有系统 在尝试发明新事物之前，我们可以利用现有的语法或系统吗？这是我遇到的一些。 国际单位系统 肯定，您熟悉诸如“ kilobyte”和“ megabyte”之类的术语。欧洲人非常习惯“毫米”和“厘米”。其他例子是“ Giga”，“ Tera”和“ PETA”。这些前缀可用于长度，重量，体积等。 $ CENTI字体尺寸可以工作吗？它在一定程度上是直观的，也就是说，如果您熟悉度量系统。这是一个有限的量表。而且没有添加新尺寸的空间，因为它们已经设置了。

传统点大小名称 很久以前，在计算机和桌面出版之前，书籍和报纸被铅类型打印。类型的设置器具有不同尺寸的不同名称。尺寸具有对点大小（PT）的引用，从理论上讲，可以用于像素大小（PX）。 说，我确实喜欢这种系统，因为这就像过去时代的旧工艺品一样。但是这些名称是如此奇怪，专门用于类型的大小，以至于感觉就像是用于断点和间距之类的东西。 [2

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

有多种辣椒。 $ habarero，比$ cayenne高，比$ jalapeno热。那会很有趣，是吗？ ，但我喜欢编写字体大小的想法：$ tabasco，我看到了两个问题。如果您不喜欢辣椒，那么您将不知道哪种胡椒比另一个胡椒粉更热 - 因此，它不是普遍直观的。另外，贝尔辣椒在斯科维尔秤上为0，没有什么。卡罗来纳州收割者是世界上最热门的胡椒，所以秤是有限的。 ，是的，辣椒尺度的尺度不大或更小，它们更热。坏概念。也许更常见的东西，例如球类型？

有各种各样的球。您有手球，足球，排球等。需要比药球更大的东西吗？使用$海滩。比网球小的东西？使用$ 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更新所有位置之前。这几乎就像使用RAW CSS一样。可维护性低得分。

动物王国怎么样？

大自然在地球上提供了无数的物种，这种物种在这种情况下派上用场。想象一下这样的东西：

需要比鼠标小的东西？使用$ bee，$ ant或$跳蚤。比熊大？尝试$驼鹿或$ hippo。比大象大？好吧，您有$鲸鱼或heck，我们可以史前并使用$ t-rex。这里总是有一只动物可以挤在这里。非常通用，非常直观，也无限（几乎）。而且很有趣 - 我不介意做字体大小：$松鼠。 ？

，但是再说一次，即使我们确切地知道我们的字体大小动物园中包含哪些动物，也可能需要引用变量。但这也许只要缩放就没什么大不了的。

我花了太多时间来思考这个

还是我？代码库是您花费工作时间的地方。就像椅子和监视器一样，这是您的工作环境。工作场所应该是一个不错的地方。

如何处理字体尺寸尺度？您是否有一个用于字体的系统，另一个用于利润率之类的系统？谁能直接跳入您的代码并了解一切的组织方式？请在评论中说出！