你如何命名颜色变量？

你使用什么命名方案来命名颜色变量？
你是否成功编写了能够以与颜色表示无关的方式使用颜色变量的 CSS？
我尝试过以下所有方法，但我还没有成功编写出适用于任何配色方案的 CSS。☹️

— Lea Verou (@LeaVerou) 2018年10月14日

我记得我第一次在一个项目中尝试 Sass 的时候。我首先想要做的事情就是将我的颜色变量化。根据我在 HTML 中命名事物的技巧，我知道要避免像 .header-blue-left-bottom 这样的类，因为该元素的颜色和位置可能会发生变化。最好让它反映它是什么而不是它是什么样子。

所以，我试图让我的颜色在某种意义上具有语义——它们代表什么，而不是它们实际上是什么。

$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;

但我发现我完全记不住它们，并且不得不不断参考我在哪里定义它们才能使用它们。后来，在“随它去吧”的时刻，我给颜色起了更像…这样的名字。

$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;

$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;

我发现这在没有或几乎没有负面影响的情况下更直观。毕竟，这不是跨越 HTML-CSS 边界；这完全在 CSS 内部，并且仅面向开发者，这使得问题的范围更加狭窄。

以类似的方式，我尝试过将颜色保存在 Sass 映射中，例如

$colors: (
  light: #ccc,
  dark: #333
);

但那里的唯一模糊目标是清理全局命名空间，这可能不值得每次都需要 map-get 的麻烦。如果你需要做任何事情，$-c-orange 这样的命名空间可能是一种更容易的方法。

如今，我在 Sass 中基本上坚持使用这种仅使用颜色名称的方法。随着向 CSS 自定义属性的转变，我认为拥有 --c-orange 和 --c-gray-5 同样合适。

:root {
  -c-orange: #F060D6;
  -c-red: #BB532E;
  -c-blue: #4C9FEB;

  -c-gray-1: #eee;
  -c-gray-2: #ccc;
  -c-gray-3: #555;
}

你可以通过保持抽象来更具体地命名这些名称，就像 Marcus Ortense 所说

$color-primary:
$color-primary-dark:
$color-primary-light: 

还有 Mike Street 所说的每个基础的变体

$primary:
$primaryLight: 
$primaryDark:

$secondary:
$secondaryLight:
$secondaryDark:

$neutralDarker:
$neutralDark:
$neutral:
$neutralLight:
$neutralLighter: 
$neutralLightest: 

Silvestar Bistrović 最近写了一篇关于 使用抽象希腊数字命名法 的文章。

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;

我之前在媒体查询断点中使用过这种东西，因为数字在那里似乎很有意义（例如，低数字表示较小的屏幕，大数字表示较大的屏幕）。我也可以看到这对于同一颜色的色调或阴影来说是很好的，但为什么不使用常规数字呢？

我经常看到的另一种方法是将命名颜色与抽象名称结合起来。 Geoff 这样做，并且 John Carroll 在这里列出了。

$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;

// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;

// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;

这可以根据你的需要变得尽可能冗长，甚至可以 在从调色板中调用时添加变体。

$table-row-background: lighten($color-background, 10%);

Stuart Robson 甚至在名称中加入了一些 BEM 风格，包括命名空间。

$ns-color__blue—dark: rgb(25,25,112); 
$ns-brand__color—primary: $ns-color__blue—dark;

// component.scss
$ns-component__color—text: $ns-brand__color—primary;

Material Design 使用类似于 font-weight 的值！这意味着你最终会得到一些东西，比如基本范围加上备选方案。

$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:

$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:

你如何选择颜色的名称？你可能会对如何称呼阳光黄与向日葵黄感兴趣，或者你可能只是需要一些帮助。这里有一个 项目 可以做到这一点，这里还有另一个。

查看 Maneesh 在 CodePen 上创作的 Pen 颜色命名器 (@maneeshc)。

甚至还有一个 Sublime Text 插件 用于转换它们（转换为任何你想要的语法）。

既然我们正在谈论命名

• 努力实现更好的命名
• 命名事物变得越来越难
• 命名媒体查询