什么是BEM

BEM代表块（Block），元素（Element），修饰符（Modifier）。

基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块。编程方法论中一个最常见的例子就是面向对象编程（OOP）。这一编程范例出现在许多语言中。在某种程度上，BEM和OOP是相似的。它是一种用代码和一系列模式来描述现实情况的方法，它只考虑程序实体而无所谓使用什么编程语言。

Block

  1. 独立的有意义的实体

比如header, container,menu,checkbox,input

Element

  • Block中的没有独立意义，但是语义上与Block有联系的部分

  比如menu item,list item,checkbox caption,title,header

Modifier

  • Block和Element的标志，用来改变Block和Element的行为

    比如disabled,highlighted,checked,fixed,size big,color yellow

常见使用方式举例


    <buttonclass="button">
    Normal button
    </button>
    <buttonclass="button button--state-success">
    Success button
    </button>
    <buttonclass="button button--state-danger">
    Danger button
    </button>

总结

上面的例子用中划线分隔的三个部分就分别是Block,Element,Modifier。为什么要使用BEM方式来命名，从表现形式来看，是为了做到防止命名冲突，同时见名知意，目前有些项目会采取这种方式。

为了防止命名冲突有一种类似的方案是CSS MODULES。

总之命名还是比较重要，大家可以自行取舍。