命名 CSS 颜色变量的最佳实践

Question

这是一个基本问题，但我想知道在为应用程序定义主颜色时，颜色类是否应该按其颜色命名：

pumpkin-orange, topaz, sky-blue,gray-color

或者通过它们的含义/功能：

main-color, main-color-hover, secondary-color, link-color, disabled-color...

Answer 1

处理颜色的最佳方法，尤其是在大型、复杂的项目中，是同时使用品牌名称和颜色功能名称，并将它们组合起来，以便维护项目调色板变得非常容易。

\n

\n

1. 用“颜色”名称命名从设计中获得的所有颜色（red-bright、red-light、red-pale。这与您的项目 HTML 无关，它仅与设计者选择作为当前主题的调色板相关

   \n
\n

2. 命名项目中使用任何颜色的每个位置及其功能名称（link-color, banner-color, banner-border, banner-bg,footer-bg）。

   \n

   这些名称独立于视觉设计。

   \n

   仅在应用于 HTML 元素的 CSS 代码中使用功能名称。唯一的例外是，如果您使用 CSS 自定义属性 ( --var(name))，则颜色名称会在:root以便功能名称可以使用它们。

   \n
\n

3. 根据视觉设计将功能名称连接到适当的颜色名称。将调色板主题以及功能颜色和品牌颜色之间的联系保留在同一文件中（例如_colors.scss）。

   \n
\n

\n

示例（这里我简化语法只是为了说明颜色命名点，实际上您需要使用 CSS 自定义属性、Sass 或 LESS 变量语法）：

\n

/* ===== Color theme\xe2\x80\x94Bright ===== */  \nblue:       #0000ff;  \ngreen:      #008000;  \ndark-green: #006400;  \nneon-green: #00ff00;  \nneon-blue:  #00ffff;  \n\n\n/* ===== Project color definitions ===== */\n/* All places where color is specified in the project */\n/* Currently using the Bright design palette */  \nlink-color:          blue;  \nbanner-color:        green;  \nbanner-border:       dark-green;  \nbanner-bg:           neon-green;  \nalert-status:        green;  \nalert-status-border: dark-green;  \nbutton-bg:           neon-blue;  \nbutton-border:       blue;  \nfooter-bg:           neon-blue;  \n

\n

这样，如果您必须更改任何与颜色相关的内容，您只需处理此文件，无需筛选所有 CSS。

\n

此过程要求每次向项目添加新的 HTML 及其 CSS 时，您都需要为新组件提供功能名称，并且仅在常规 CSS 中使用功能名称。同时将新添加的功能名称复制到颜色文件 ( _colors.scss) 中，并在其中使用品牌调色板定义它。

\n

设计改造后

\n

如果出现新的视觉设计，您可以轻松地将所有功能名称与新颜色名称进行切换，并在 5 分钟内更改整个项目的颜色！

\n

/* ===== Color theme\xe2\x80\x94Bright ===== */  \nblue:       #0000ff;  \ngreen:      #008000;  \ndark-green: #006400;  \nneon-green: #00ff00;  \nneon-blue:  #00ffff;  \n\n/* ===== Color theme\xe2\x80\x94Pale ===== */  \npale-blue:       #bbbbff;  \npale-green:      #a1c8a1;  \npale-dark-green: #506450;  \npale-neon-green: #ddffdd;  \npale-neon-blue:  #ccffff;  \n\n\n/* ===== Project color definitions ===== */\n/* All places where color is specified in the project */\n/* Currently using the Pale design palette */  \nlink-color:          pale-blue;  \nbanner-color:        pale-green;  \nbanner-border:       pale-dark-green;  \nbanner-bg:           pale-neon-green;  \nalert-status:        pale-green;  \nalert-status-border: pale-dark-green;  \nbutton-bg:           pale-neon-blue;  \nbutton-border:       pale-blue;  \nfooter-bg:           pale-neon-blue;  \n

\n

您应该从编译的CSS中删除未使用的调色板以获得更好的性能。这意味着，如果您使用 CSS 自定义属性，您应该从中删除旧的品牌颜色变量:root并添加新的变量。

\n

但是您可以保留不同的品牌调色板定义以供_colors.scss将来参考，因为只有在功能名称中使用的调色板才会最终出现在实际的 CSS 中。

\n

Answer 2

您应该避免按颜色命名 css 类。请改用功能名称。我建议您查看BEM 命名约定。我认为采用 css 的结构化方法是一个好的开始。