通过class选择器实现组件状态切换，如is-active、is-loading等，结合JavaScript操作DOM动态增删class，使样式随状态变化，实现菜单展开、按钮加载、表单校验等交互效果。多个状态可共存且样式叠加，采用语义化命名规范（如BEM风格）提升可读性和维护性，实现样式解耦与逻辑清晰，是前端开发中高效实用的模式。
在CSS中，通过class选择器来处理组件的状态切换是一种常见且高效的做法。它能让样式根据元素当前所处的状态动态变化，同时保持HTML结构清晰、可维护性强。
使用Class表示不同状态
将组件的不同状态映射为不同的class名称，比如is-active、is-hidden、is-disabled等。通过JavaScript添加或移除这些class来控制样式的切换。
- 一个菜单默认隐藏，给它加上
is-active时显示 - 按钮在加载状态下添加
is-loading，改变文字和光标样式 - 表单项验证失败时加上
is-invalid，提示用户输入错误
对应的CSS写法如下：
.menu {
display: none;
}
.menu.is-active {
display: block;
}
.button.is-loading {
opacity: 0.6;
cursor: not-allowed;
}
.form-input.is-invalid {
border-color: red;
background-color: #ffe8e8;
}
JavaScript控制状态切换
利用DOM操作方法，动态切换class，实现视觉状态更新。
立即学习“前端免费学习笔记（深入）”；
示例：点击按钮展开菜单const menu = document.querySelector('.menu');
const toggleBtn = document.querySelector('#toggle-btn');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('is-active');
});
当用户点击按钮时，is-active类被添加或移除，CSS自动应用对应样式。
组合状态与多状态共存
多个状态class可以同时存在，互不干扰。例如一个按钮可以同时拥有is-disabled和is-loading，样式会叠加生效。
- 样式解耦，每个class只负责一种状态表现
- 便于测试和复用，无需为每种组合单独定义样式
- JS逻辑清晰，只需关注是否添加/删除某个状态class
命名规范建议
为了提升可读性和团队协作效率，推荐使用语义化的命名方式，如BEM中的修饰符（Modifier）风格：
-
btn--loading表示按钮处于加载状态 -
tab__item--selected表示选项卡项被选中 -
panel--collapsed表示面板收起
这类命名让状态一目了然，也避免与其他样式冲突。
基本上就这些。用class控制状态切换简单直接，配合JavaScript能实现丰富的交互效果，是前端开发中最实用的模式之一。
