在CSS中使用大写字母表示十六进制颜色值是否有特殊原因？

Question

我看到CSS属性值中的颜色通常以大写形式书写：

.foo .bar {
  background-color: #A41B35;
  color: #FFF;
}

但你也可以使用：

/* Same same */
.foo .bar {
  background-color: #a41b35;
  color: #fff;
}

或者甚至是非常有争议的：

/* Check the link to see why it can be interesting */
.foo .bar {
  background-color: #A41b35;
  color: #FfF;
}

在任何情况下（嘿嘿嘿），尽可能使用命名颜色，比如white，而不是#fff，可以让我们的生活更轻松，但这是另一个问题。

看起来使用小写值也能达到同样的效果，而且CSS中的颜色值不区分大小写。很多图形设计软件也使用大写形式。在源代码中找到大写表示法非常常见，似乎有一种传统的存在。

我理解一致性的重要性，即在软件的各个地方应该保持一致，但由于标准没有给出明确的指示，人们会做他们想做的或者被告知要做的事情。

这是否有合理的原因，比如历史、兼容性、旧版IE6的hack、性能或实际原因？这是一个文化问题，不仅仅是技术问题（尽管它可能有技术起源）。

- smonff

---

个人偏好，最好的做法是选择一种方式（大写或小写）并贯彻始终。 - Adam Jenkins

最终归结于个人偏好。正如您所提到的，它们实际上不区分大小写。甚至有一份Drupal文档建议使用小写字母来表示十六进制颜色：https://www.drupal.org/node/1360790 - Guo Hong Lim

作为一个经常编辑 CSS 的人，我认为打大写字母很麻烦。 - smonff

问题已经关闭，社区要求进行编辑以帮助回答提供“事实和引用”。实际上，这已经是现状。 - smonff

认知科学家和印刷工作者都认为小写字母比大写字母更易读。然而，小写字母的平均高度和宽度比大写字符要小，这表明大写字母具有优势。这意味着，尽管下面许多评论声称小写字母本质上更易于阅读（考虑到大写字母的高度/宽度优势），但事实并非如此。- 国家医学图书馆国立卫生研究院。 - Green

Answer 1

除了个人喜好外，我不知道还有其他不同之处。个人而言，我更喜欢小写字母，因为阅读速度更快，尽管对于像CSS颜色值这样非常短的字符串来说，这种好处可能微不足道。实际上，我认为只是因为我觉得小写字母看起来更好看。

然而，十六进制数 传统上 使用大写字母书写，所以严格来说，也许我是“错误”的。

- Bobby Jack

---

人们主要通过字母和数字的顶部外观来识别它们，因此使用全部大写更有意义。对我来说，这样阅读起来也更好，但我不会说任何使用小写的人是错误的或其他什么。 - Maarten Bodewes

Answer 2

其实颜色大小写并不重要，重要的是要有一个惯例并且坚持下去。我喜欢使用严格的 Sass-lint 规则来强制使用小写十六进制值，并尽可能使用短值（例如使用#fff而不是#ffffff）。

以下是我选择小写字母的原因：

• 打字更容易和更快速（我已经改变了我的大写锁定键的绑定，使用 shift 键很麻烦，特别是混合数字和字母时）

• 如果您知道要查找什么，那么查找内容就更容易。（假设您正在将旧代码重写为 Sass，您已经修复了所有出现的#aa99cc，但是AA99cc、Aa99CC、A9C、a9c呢？通过代码检查工具可以帮助您发现这些问题）

- Patrick

---

小写字母对人类来说更容易阅读，比如说，将 C68B80D 与 c68b80d 进行辨认就可以看出区别。 - Oskar Limka

在CSS中，小写十六进制可能没问题，但是在项目代码中，十六进制数字可以出现在任何位置，并且根据约定，“0xcad”或“cadh”可能不如0xCAD易读。 - oᴉɹǝɥɔ

以下是更喜欢使用小写字母而不是大写字母的另一个原因：混淆数字和字母的风险，特别是 8 和 B，以及/或者 4 和 A。 * 建议：在十六进制数文字中使用小写字母。 - Henke

Answer 3

没有标准，但一致性很重要。

采用大写标记可以将数字（十进制或十六进制）与单词分开以保持一致。例如，在"1px solid #D0D0D0"中，所有字母和关键字都是小写（矮的），而数字/数字字符是高的；注意，"0"和"D"都是数字。

这也与项目的其他部分保持一致，该部分可能具有不同的十六进制语法，例如0xCAD或\xCAD或CADh。编写0xcad、\xcad或cadh将无法读取。

- oᴉɹǝɥɔ

Answer 4

今天没有人质疑十六进制数不区分大小写，然而与其他数字系统相比，它的不区分大小写是相当特殊的。事实上，通用数字系统转换器很少做出这种异常情况，它们假设数字只由大写或只有小写字符组成。

从历史上看，十六进制数字仅由大写字母表示，这是因为早期操作系统没有编码小写字符。进行复古计算的人一定会选择大写字母。

- Shrimpy

Answer 5

在CSS中使用大写字母是非常普遍的。

这个答案并不是要争辩你是否应该在CSS中使用大写字母，而是关于美学猜测和历史先例，为什么你经常会看到大写字母。

(1) 所以你已经知道存在小写字母（x高度或大写字母的大约一半高度）和大写字母（大写字母或不规则字母，其中字母几乎占据em框的整个高度），但也存在全高度数字和低高度数字（也称为旧式数字，小写字母，悬挂数字）。你不会在现实世界中发现这些数字，除了祖父钟之外，但许多字体通过“onum”功能或有时甚至是“scmp”（小型大写字母）功能支持它们。

知道这些高度变体都存在，显示全高度数字与半高度字母的混合会产生字符高度的不一致性，反之，混合半高度数字与全高度字母会产生字符高度的不一致性（尽管你无法在OpenType功能之外使用半高度数字，因为它们没有唯一的Unicode代码点）。因此，像PhotoShop这样的专业设计应用程序可能更注重演示美学而不是打字效率（按住Shift键），这在CSS普及之前并不是那么重要。

旧式数字

排版特点列表

(2) 早期的编程语言（COBOL，FORTRAN，BASIC...）和输入终端设备都是纯大写字母 - 没有键可以输入小写字母，即使有这些字符也不存在于有限的字符集中。

键盘默认是否启用大写锁定

- Dwayne Robinson

Answer 6

通过快速谷歌搜索，您可以了解到有很多人喜欢小写字母。个人认为小写更容易识别和书写，因为大多数（如果不是全部）CSS代码都是小写的，并且不区分大小写。噢，而且在代码中看起来更好。:3

- carloswm85

Answer 7

大写字母在阅读时更易于辨认。

例外情况是当小写字母大小为大写字母的两倍时，由于“单词形状”，它可能更容易阅读 - “d”、“h”和“p”的尖角使“xxxd”和“xhxpx”有所区别。无论大小如何，“1lmnmmn”等代码都没有单词形状。

小写字母也会受到类似字符的影响，例如“1l”和“mnw”以及其他取决于字体的字符。大写字母也会因O和0而受到影响，这就是为什么控制台字体使用交叉线零的原因。

Base32采用了一种完全不同的方法来解决第二个问题，即使用所有26个大写字母和仅有的6个数字：2、3、4、5、6和7。

早期计算机工程师做出了明智的选择，有很好的理由 - 可读性提高了准确性。

- Michael Cole

---

如果大写更容易阅读，为什么不所有的书都以大写字母编辑？另外，关于类似字符的观点也相当薄弱，因为大多数程序员会使用等宽字体来避免这些错误。 - smonff

@smonff 请重新阅读我的答案。 - Michael Cole

我真的读了很多遍。Base32维基百科页面的链接把我带到了十六进制页面。它有一个书面表示部分，指出有一些系统使用混合大小写约定（如AbCdEf）来帮助字符区分。看起来这是CSS的另一个可能有趣的解释，可能有意义的是使用小写字母[a-f]与“大写”[0-9]的混合？不过我不会混合使用[a-f] + [A-F]。 - smonff

为什么所有的书都不是用大写字母编辑的呢？实际上，拉丁语最初是用全大写字母书写的。小写字母要晚得多，基本上是一种草书体。书籍的编辑方式基于历史传统，而不是为了最大化可读性。如果这是唯一的重点，我们都会说世界语并使用国际音标字母表之类的东西。 - Kyle Baker

Answer 8

CSS的值不区分大小写。虽然可以使用大写字母，但最好遵循惯例，使用小写字母。

- Hello Universe

---

这是不正确的，使用大写或小写字母没有好坏之分。这是个人喜好问题，只需自行选择（大写或小写）并坚持使用，不要混用。 - Adam Jenkins

实际上，在十六进制中有惯例称要使用混合大小写以提高可读性（例如 AbCdEf）。这并不意味着我们应该这样做，但这可能会有助于使用“小写”CSS（因为数字可以被视为事实上的大写字母）。 - smonff

当我在谷歌上找到这个问题时，它立即显示了这个最负面的答案。幸运的是，我正在检查帖子。否则，我本来会相信它是答案。 - Felix Htoo