BEM(Block, Element, Modifier)是 HTML/CSS 类的命名方法,它可以让 HTML 和 CSS 代码更有条理。

概念与用法 #

一开始看不懂没关系,后面有示例。

  • block(块):可以独立使用的 HTML 元素(比如:<nav>),可以不包含 element。
  • element(元素):依附于 block 的 HTML 元素,无法独立存在(比如:<li>),前面要加上双下划线 __
  • modifier(修饰符):表示 block 或者 element 的状态和外观,前面要加上双连字符
  • 用单连字符 - 连接单词,比如:search-form
  • element 只属于 …