CSS变量实现组件样式的封装技巧有哪些？-css教程-PHP中文网

css变量作用域由声明选择器决定，必须就近声明于组件选择器内（如.button{--btn-bg:#007bff}），禁用:root全局声明；变量名须带组件前缀（--button-bg）、状态后缀（--button-bg-hover），避免裸名冲突；优先用class切换变量值而非js setproperty。

css变量实现组件样式的封装技巧有哪些？

组件内变量必须声明在选择器作用域里

直接写 :root { --btn-bg: #007bff; } 看似方便，但会导致所有用 var(--btn-bg) 的地方都受同一份值控制——按钮、卡片、输入框全被绑死。真正隔离靠的是“就近声明”：.button { --btn-bg: #007bff; --btn-border: #ccc; }。这样变量只在 .button 及其后代生效，换主题时只需切换类名，不牵连其他组件。

常见错误是把变量全堆在 :root，结果改一个 --card-shadow，轮播图的指示点也跟着变模糊；或者在 Vue/React 组件样式中漏写根选择器，导致 var(--size) 查不到值，渲染成默认色。

变量声明位置决定作用域边界，不是文件位置
嵌套组件（如 .modal .dialog .close-btn）建议在最外层声明变量，避免重复定义
IE11 不支持 :root 以外的作用域变量，若需兼容，得用 JS 注入或降级为 CSS 类切换

变量名要带组件前缀，禁止裸名复用

--bg、--color 这类通用名是隐患源头。不同组件同时声明 --bg，CSS 层叠规则会按选择器权重和顺序覆盖，谁在后面编译谁赢——你改了 header.less 里的 --bg，sidebar.css 却悄悄失效。

正确做法是强制前缀：--button-bg、--input-border-radius、--card-header-padding。前缀不是为了“好看”，而是让变量名具备语义归属，grep 搜索时能准确定位，构建工具也能做静态分析。

前缀粒度以组件为单位，不是功能（不用 --border-radius-sm，而用 --card-border-radius）
状态变量加后缀：--button-bg-hover、--button-bg-disabled，别指望靠 &:hover 动态算
避免用 !important 锁死变量值，它会阻断后续所有覆盖机会

用 class 控制变量值，而非 JS 直接 setProperty

很多人一上来就写 el.style.setProperty('--btn-bg', '#ff6b6b')，短期可行，长期难维护：变量值散落在 JS 里，主题切换要遍历所有实例，夜间模式开关变成性能瓶颈。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

更可控的方式是预设 class：.button--primary { --btn-bg: #007bff; --btn-text: #fff; }，然后通过 el.classList.toggle('button--primary') 切换。CSS 变量天然支持层叠，.button.button--primary 和 .button.button--danger 的变量互不干扰。