采用BEM命名法规范类名，按模块拆分CSS文件，使用scoped隔离样式，避免深层嵌套与全局污染，提升可维护性与性能。
在大型项目中，CSS 样式容易变得混乱、冗余且难以维护。合理使用 CSS 选择器不仅能提升性能，还能增强代码的可读性和可维护性。关键在于建立清晰的结构、减少嵌套深度、提高选择器的明确性，并避免全局污染。
使用语义化类名与命名规范
选择器应基于组件或功能命名，而非样式表现。推荐采用 BEM（Block Element Modifier）命名法，它通过命名规则明确模块结构：
- Block：独立的功能模块，如 .card
- Element：属于 block 的子元素，如 .card__title
- Modifier：状态或变体，如 .card--featured
这种命名方式让类名自解释，降低团队协作中的理解成本，也便于查找和重构。
限制选择器作用范围
避免使用过于宽泛的选择器（如 div 或 *），它们会影响渲染性能并导致意外样式覆盖。
立即学习“前端免费学习笔记（深入）”；
- 优先使用类选择器，而不是标签或层级选择器
- 避免深层嵌套，如 .header .nav .list .item a:hover，这类选择器难维护且权重高
- 使用 scoped 样式（如 Vue 的 <style scoped>）或 CSS Modules 隔离组件样式
通过限制作用域，确保样式只影响预期元素，减少副作用。
合理组织 CSS 文件结构
将样式按功能或模块拆分，配合预处理器（如 Sass）提升管理效率：
- 基础层：重置样式、通用工具类（_reset.scss）
- 组件层：按钮、卡片、表单等独立模块（_button.scss）
- 布局层：网格、页头、页脚等（_layout.scss）
- 主题层：配色、字体等视觉变量（_variables.scss）
使用 @import 或构建工具合并文件，既保持开发时的清晰结构，又输出优化后的单一 CSS。
利用属性选择器与状态类提升灵活性
对于动态样式，避免为每种状态写独立类，可结合属性选择器与 JS 控制：
- 使用 [data-theme="dark"] 切换主题
- 用 .btn[disabled] 处理禁用状态
- 通过 .is-active、.has-error 等状态类控制显示逻辑
这种方式让 HTML 与 CSS 耦合更低，更易被 JavaScript 操作和测试。
基本上就这些。关键是保持选择器简洁、语义清晰，并配合工程化手段控制作用域。不复杂但容易忽略。
