在我对 CSS 变量的探索中，我发现了许多令人兴奋的潜力和微妙的细节，这些细节乍一看并不总是显而易见。和许多开发人员一样，我最初以简单、直接的方式使用 CSS 变量，很少遇到边缘情况。这种方法对于许多用途来说都很常见且有效，但这意味着还有很多东西需要探索和实验。在我看来，更深入地了解 CSS 变量命名规则和有效的赋值可以显着扩展其应用的范围和灵活性。
我在这里整理了我的研究和见解，旨在提供对 CSS 变量更彻底和全面的了解。我希望这篇文章能够成为帮助您和我自己释放 CSS 变量的全部潜力并发现样式的新可能性的资源。
本系列假设您已经熟悉 CSS 变量的基础知识，例如 --name: value 语法和 var(--name) 函数，或者您熟悉基本概念本 CSS 变量简介的前三分之一介绍了。
使用 CSS 变量时，命名是第一步。以下是命名 CSS 变量的一些关键准则：
所有自定义属性名称必须以两个连字符 (--) 开头，例如 --main-color。此前缀有助于浏览器区分自定义属性和原生 CSS 属性，减少冲突的机会。
CSS 自定义属性名称区分大小写，这意味着 --main-color 和 --Main-Color 被视为两个完全不同的变量。在整个代码中保持大小写一致非常重要，以避免错误地引用大小写不匹配的变量，这可能导致解析错误。
示例：
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
独立的 -- 被保留，并且在未来的规范中可能有特定的用途。因此，请避免将其用作自定义属性名称。
示例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
命名 CSS 变量时，考虑允许的字符和约定至关重要，这可以提高可读性并防止冲突。
示例
下面的例子演示了 CSS 变量命名的灵活性以及如何正确处理特殊字符：
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
CSS变量可以保存各种类型的值，但它们也需要遵循特定的语法规则。让我们看一些有效赋值的示例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
如这些示例所示，CSS 变量支持多种值。但是，由于 CSS 变量是 CSS 属性的一部分，因此它们必须遵循通用 CSS 语法，例如匹配引号和括号。让我们探索一些不满足这些要求的值。
为CSS变量分配无效值可能会导致解析错误，这可能会导致后续样式出现问题。以下是一些无效赋值的示例：
:root {
/* Naming with Unicode characters */
--primary-color: #3498db;
--secondary-color: #e74c3c;
/* Using an Emoji as a variable name */
--?: #2ecc71;
/* Special characters with escape sequences, resulting in --B&W? */
--B\&W\?: #2ecc72;
/* Using Unicode escape codes, equivalent to --B&W? */
--BWF: #abcdef;
}
.container {
color: var(--BWF); /* Result is #abcdef */
}
.container-alt {
color: var(--B\&W\?); /* Result is #abcdef */
}
CSS 变量与其他 CSS 属性一样，支持 !important 标志，该标志会影响优先级。下面的示例展示了 !important 如何影响变量优先级：
:root {
--foo: if(x > 5) this.width = 10;
--string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
--complex-calc: calc(100% / 3 + 20px); /* Complex calculations with calc() */
--negative-value: -10px; /* Negative values */
--multiple-values: 10px 20px 30px 40px; /* Multiple values, e.g., for margin or padding */
--unitless-number: 1.5; /* Unitless numbers */
--nested-var: var(--string-with-semicolon); /* Nested variables using var() */
--empty-string: ; /* Empty string */
--color: rgba(255, 0, 0, 0.5); /* Color functions */
--special-chars: "Content: \"Hello\""; /* Strings with special characters */
}
在此示例中，#target 和 .cls 都会影响 div 上的 --text-color 变量。根据选择器的特殊性，#target 应覆盖 .cls。但是，由于 .cls 中的 --text-color 使用 !important，因此应用于 div 的最终颜色将为绿色。需要注意的是，!important 仅影响变量之间的优先级，不会传播到引用该变量的属性。最终的颜色只是绿色，而不是绿色！重要。
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
使用initial作为CSS变量值是一种独特的行为。当分配给变量时，initial 使该变量无效，导致使用 var() 访问时失败。这与空值 (--empty: ;) 不同，空值不会导致属性无效。使用初始有效地“重置”变量，取消其定义。 （参考）
CSS变量支持引用其他变量，但是如果发生依赖循环，循环中的所有变量都会失效。这是依赖循环的示例：
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
在此示例中，--one、--two 和 --third 相互引用，创建一个循环。结果，由于循环依赖，所有三个变量都变得无效，从而阻止它们解析。 （参考）
在本文中，我们深入研究了 CSS 变量的命名和赋值规则，介绍了如何正确定义和管理这些变量，同时避免常见的解析错误。有了这些基础知识，您应该能够在未来的开发项目中更有效地使用 CSS 变量。
下一篇文章将探讨如何使用 var() 检索 CSS 变量值，以及具体的应用场景，让您对 CSS 变量的使用更加灵活和强大。
以上是关于 CSS 变量你可能不知道的事情 - 命名规则和赋值的详细内容。更多信息请关注PHP中文网其他相关文章！
