CSS规范须知——快速了解BEM

BEM 命名规范

BEM，表示 Block Element Modifier，可以理解为帮助我们在前端开发中写出更具复用性的组件和代码的一套方法。更具体点，是一种有效的命名规范，可以满足我们写出更优质的前端代码，体现在：

• easier to read and understand
• easier to work with
• easier to scale
• more robust and explicit
• a lot more strict

三个样式书写规范

• 只使用 class 作为样式的选择器
• 避免使用 id 和标签
• 避免在一个页面中对其他 blocks/elements 有依赖（也就是避免写出嵌套的选择器）

命名解释

• Block

  页面上有意义的一个实体。

  比如：header、container、menu、checkbox、input

• Element

  Block 的一个部分，本身是没意义的，但是和 Block 联系在一起就有了语义。

  比如：menu item、list item、checkbox caption、header title

  // Good
  .block__elem { ... }
  
  // Bad（带有嵌套，带有标签名）
  .block .block__elem { ... }
  div.block__elem { ... }
  

• Modifier

  表示 Block 或 Element 的一个状态，或是对它们的一个修饰符。

  比如：disabled、highlighted、checked、fixed、size、big、color yellow

  // Good
  <div class="block block--mod">...</div>
  
  // Bad
  <div class="block--mod">...</div>
  

  // 类名写法
  .block--mod { }
  .block__elem--mod { }
  .block--color-black { }
  .block__elem--color-red { }
  

参考

• BEM