CSS可通过JavaScript动态注入实现CSS-in-JS，主要方式包括动态创建style标签、操作CSSStyleSheet API及使用emotion等库，适用于组件化封装、主题切换与运行时样式生成。
可以，CSS 能通过 JavaScript 动态注入到页面中，这就是常说的“CSS-in-JS”方式。它不是把 CSS 字符串直接写进 JS 语法里（比如当变量值），而是用 JS 创建样式规则、生成 style 标签或操作 CSSOM，最终让浏览器识别并应用样式。
常见的 CSS-in-JS 实现方式
主流做法有三类，适用场景略有不同：
- 动态创建 ：JS 拼接 CSS 字符串，插入到 head 中。适合简单定制、主题切换或运行时样式生成。
- 操作 CSSStyleSheet API：通过 document.styleSheets 获取样式表，用 insertRule() 添加规则。更底层、可控性强，但需注意浏览器兼容性（如 Safari 对 insertRule 的限制）。
- 使用成熟库（如 emotion、styled-components）：它们在运行时解析带样式的 JS 对象或模板字符串，自动生成唯一 class 名，并注入 style 标签。兼顾开发体验与性能，支持服务端渲染、主题、关键 CSS 提取等。
一个手动注入的简单例子
以下代码会在页面 head 中添加一条全局样式：
const style = document.createElement('style');
style.textContent = `
.highlight { background: #ffeb3b; padding: 4px 8px; border-radius: 3px; }
`;
document.head.appendChild(style);
之后任何元素加上 class="highlight" 就会生效。这种方式轻量、无依赖，适合小项目或临时覆盖样式。
需要注意的关键点
- 样式注入时机很重要——确保在目标 DOM 元素挂载后执行，否则可能无效；可用 requestIdleCallback 或 useEffect（React）控制。
- 避免重复注入相同样式，建议加标识（如 data-id）或检查已存在规则。
- 动态样式不参与传统 CSS 打包优化（如 tree-shaking、压缩），大项目中需权衡可维护性与体积。
- 服务端渲染（SSR）场景下，JS 注入的样式不会出现在初始 HTML 中，需配合 extractCritical 等机制提取首屏关键 CSS。
和传统 CSS 文件的本质区别
CSS-in-JS 的核心价值不在“能不能写”，而在“是否需要按组件封装样式、是否依赖 JS 运行时逻辑（如 props、theme）、是否要细粒度控制作用域”。它解决的是 CSS 全局污染、复用困难、动态性弱等问题，而不是替代 link 引入样式表这种基础能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
