CSS命名规范-BEM

wangyang

在CSS中，BEM（Block, Element, Modifier）命名法是一种流行的命名约定，它帮助开发者组织和管理CSS类名，使代码更加清晰、可维护和可重用。以下是BEM命名法的基本概念和规则：

1. Block（块）

• 定义：一个独立的、可重用的组件或页面区域。
• 命名规则：使用两个连字符（--）作为前缀（尽管这不是强制的，但有助于区分BEM类名）。
• 示例：.block-name
  

2. Element（元素）

• 定义：块内的子组件或组件的某个部分。
• 命名规则：在块名后添加两个连字符（__），然后是元素的名称。
• 示例：.block-name__element-name
  

3. Modifier（修饰符）

• 定义：用于改变块或元素的外观、行为或状态的类名。
• 命名规则：在块名或元素名后添加两个连字符（--），然后是修饰符的名称。
• 示例：
  
  • 修饰块：.block-name--modifier-name
  • 修饰元素：.block-name__element-name--modifier-name
    

示例假设我们有一个名为“card”的块，它有一个标题元素和一个描述元素。我们可能还希望为标题添加一个修饰符来更改其颜色。

1. <div class="card">
   
2.     <h2 class="card__title card__title--red">Card Title</h2>
   
3.     <p class="card__description">This is a card description.</p>
   
4. </div>
   

复制代码

1. .card {
   
2.     /* Card styles */
   
3. }
   
4. 
   
5. .card__title {
   
6.     /* Title styles */
   
7. }
   
8. 
   
9. .card__title--red {
   
10.     color: red;
    
11.     /* Additional styles for red title */
    
12. }
    
13. 
    
14. .card__description {
    
15.     /* Description styles */
    
16. }
    

复制代码

优点：避免命名冲突，更容易维护代码，可以在多个项目中重复利用代码，有助于快速理解HTML和CSS之间的关系。