什么是BEM
BEM代表块(Block),元素(Element),修饰符(Modifier)。
基于组件方式的web开发方法,基本思想是将用户界面分成独立的模块。编程方法论中一个最常见的例子就是面向对象编程(OOP)。这一编程范例出现在许多语言中。在某种程度上,BEM和OOP是相似的。它是一种用代码和一系列模式来描述现实情况的方法,它只考虑程序实体而无所谓使用什么编程语言。
Block
独立的有意义的实体
比如
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。
总之命名还是比较重要,大家可以自行取舍。