BEM举例

via BEM by Example 侵删

带单个修饰符的组件

一个组件可能有不同状态。状态应该使用修饰符类来实现。

不要单独使用修饰符。修饰符的作用是增加而不是替换基类。

带子元素的组件

更复杂的组件含有子元素。
原则上不要使用标签选择器，你不知道

里面是否还会出现嵌套的

  
  
Look at me!






  
  
Look at me!

如果您的组件的子元素有几个层次，请不要尝试在类名称中表示每个层次。
BEM并非旨在传达结构深度。
表示组件中子元素的BEM类名称应仅包括基本/块名称和一个元素名称。
在下面的示例中，请注意 photo__caption__quote是BEM的不正确用法，而 photo__quote更合适。

  
  

    

      Look at me!
    
  







  
  

    
 
      Look at me!
    
  

带修饰符的组件

在某些情况下，您可能希望更改组件中的单个元素。在这些情况下，请向元素而不是组件添加修饰符。
我发现，修改元素比修改整个组件要少见得多，也没什么用。

  
  
Look at me!

基于组件修改器的样式元素

如果你发现正在以相同的方式修改同一组件的元素，则可以考虑将修改器添加到组件本身。
并基于该修改器为每个子元素调整样式。这将增加css层级，但使修改组件变得更加简单。

  
  
Look at me!






  
  
Look at me!

多词名称

BEM名称有意使用双下划线和双连字符而不是单个来分隔块元素修饰符。原因是可以将单个连字符( -)用作单词分隔符。
class名称应易于阅读， 慎用缩写。

  






// These class names are harder to read