BEM命名规范

‌BEM（Block, Element, Modifier）是一种面向对象的CSS命名方法论‌，旨在通过结构化的命名规则提升代码的可维护性、可读性和模块化。其核心思想是将用户界面拆分为独立的模块（Block），并通过元素（Element）和修饰符（Modifier）描述组件的组成和状态变化。以下是BEM规范的关键要点：‌
‌核心概念‌

• ‌Block（块）‌：独立的可复用组件（如按钮、导航栏），命名时使用名词，多个单词通过连字符（-）连接（例如：.el-button）。‌‌
• ‌Element（元素）‌：块的组成部分，必须依赖于块存在。命名时使用双下划线（__）连接块名和元素名（例如：.button__title）。‌‌
• ‌Modifier（修饰符）‌：用于描述块或元素的状态或变体（如主题、状态）。命名时使用双连字符（--）连接块名或元素名与修饰符（例如：.button--primary）。‌‌
  ‌命名规则‌
• ‌层级清晰‌：类名直接反映元素关系（例如：.pagination__prev表明“prev”是“pagination”的子元素）。‌‌
• ‌状态明确‌：通过修饰符快速识别组件状态（例如：.card--dark表示暗色主题）。‌‌
• ‌避免冲突‌：模块化命名天然隔离组件内外样式，减少全局污染。‌‌
  ‌应用优势‌
• ‌代码自解释‌：类名直接描述功能（如.user-profile__avatar--rounded），无需注释即可理解代码结构。‌‌
• ‌维护高效‌：通过类名定位元素，减少DOM结构依赖，降低调试成本。‌
• ‌团队协作友好‌：统一的命名规则加速新人理解代码逻辑。‌
  通过BEM规范，上述代码的层级关系和组件状态一目了然。‌‌

参考文章

https://www.cnblogs.com/font-jin/p/10374364.html
https://blog.csdn.net/ypgf_186/article/details/148169857