媒体查询根据设备特性如屏幕宽度或用户偏好自动应用样式，是响应式设计的核心；2. JavaScript可动态切换样式类或加载CSS文件，适用于基于用户行为或浏览器能力的复杂逻辑；3. 服务器端渲染在生成HTML前就依据用户权限或测试分组决定引入的CSS，提升性能与个性化体验。
条件引入CSS，说白了，就是让样式表根据特定的环境或状态来加载或应用。这可不是什么黑魔法，而是前端开发中很实用的技巧，能让我们的页面更智能、更高效。实现方式多种多样，最常见的无非是借力CSS自身的媒体查询、JavaScript的动态控制，或是通过服务器端渲染（SSR）来决定。每种都有它的用武之地，关键在于你面对的场景是什么。
解决方案
要实现CSS的条件引入，我们手头有几张牌可以打，每张牌都有它的适用场合和玩法。
1. 媒体查询（Media Queries）：CSS层面的智能筛选
这是最直观也最“原生”的条件引入方式。它允许我们根据设备的特性，比如屏幕宽度、高度、分辨率，甚至是用户偏好的深色模式，来应用不同的样式。这基本上是响应式设计的基石。
立即学习“前端免费学习笔记（深入）”；
比如，你想让页面在小屏幕和大屏幕上呈现不同布局：
/* 默认样式，针对所有设备或移动设备优先 */
body {
font-size: 16px;
margin: 10px;
}
/* 当屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {
body {
font-size: 18px;
margin: 20px auto;
max-width: 960px;
}
.sidebar {
display: block; /* 在大屏幕显示侧边栏 */
}
}
/* 用户偏好深色模式时应用 */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
}这里，CSS文件本身是加载的，但其中的规则是按条件生效的。这效率很高，浏览器会自行处理，不需要额外的JavaScript开销。
2. JavaScript动态控制：灵活但需权衡
当条件不仅仅是设备特性，而是用户行为、浏览器能力检测，或者一些更复杂的业务逻辑时，JavaScript就派上用场了。我们可以用JS来动态地添加、移除样式类，或者直接加载/卸载整个CSS文件。
比如说，根据用户的登录状态加载不同的主题样式：
这种方式的灵活性是媒体查询无法比拟的，但需要注意“无样式内容闪烁”（FOUC）问题，尤其是在页面加载初期就依赖JS来决定样式时。
3. 服务器端渲染（SSR）：在内容抵达前就决定样式
这是我个人觉得在某些复杂场景下非常优雅的方案。在服务器端，我们可以在渲染HTML时就根据后端逻辑（比如用户权限、A/B测试组、当前环境等）来决定哪些CSS文件应该被 标签引入，或者直接内联（inline）部分关键CSS。
例如，一个Node.js（或PHP、Python等）应用：
// 假设在Express.js中
app.get('/', (req, res) => {
let cssFile = 'main.css';
if (req.user && req.user.isAdmin) {
cssFile = 'admin.css'; // 如果是管理员，加载管理员样式
} else if (req.query.abTest === 'variantA') {
cssFile = 'ab-test-a.css'; // A/B测试
}
res.render('index', { cssPath: `/css/${cssFile}` });
});然后在你的模板文件（如EJS、Pug）中：
< 
