别再用 JS 去强行操控 CSS 样式了，这根本不是功能不够强的问题

很多前端开发在面对 CSS 怎么都调不生效的时候，第一反应就是“火力压制”。要么写一个超级冗长的选择器去强行提高权重，要么直接甩一个 !important，最糟糕的是直接在 JS 里写 element.style.display = 'none'。这种做法其实是在逃避 CSS 的级联机制，试图用指令式编程去解决声明式样式的问题。

在我看来，CSS 所谓的“不可预测性”其实是边界模糊导致的。很多人觉得 CSS 没权力控制某些状态，于是把表现逻辑搬到 JS 里。但问题是，一旦你开始在 JS 里直接修改 style，这段逻辑就脱离了 CSS 的管辖范围。当项目变大，你根本没法在样式表中一眼看出某个元素为什么变成了这个颜色，因为那个值被埋在了某个点击事件的回调函数里。

我们要意识到，边界不是限制，而是一种保证。CSS 应该只负责表现、过渡、布局和渲染，它不应该承载业务逻辑或应用状态。当你给一个类名赋予了某种业务含义，或者根据后端返回的特定值去选择选择器时，这个边界就崩了。

举个最简单的例子，做一个面板切换。

很多人的习惯是直接在 JS 里写逻辑判断：

button.addEventListener('click', () => {
  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
});

这种写法看似高效，但实际上把“显示/隐藏”这个表现层决定权交给了 JS。更好的实战做法应该是：JS 只负责切换状态标签，而 CSS 决定这个标签对应的视觉效果。

button.addEventListener('click', () => {
  panel.classList.toggle('is-open');
});

.panel {
  display: none;
}

.panel.is-open {
  display: block;
}

两种写法的最终结果一模一样，但后者保证了样式逻辑依然留在 CSS 文件里。这样当你以后想把 display: none 改成淡入淡出动画时，你只需要改一行 CSS，而不需要去翻找 JS 代码里的逻辑判断。