CSS 中 BEM命名方式

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是一种CSS Class 命名方法。

相似于:
css

.block{} .block__element{} .block--modifier{}
__双下划线表明B和E链接例如 menu __item
_单下划线表明B和M或E和M的链接 例如 menu _active 或 menu__item _active
-中划线同英语里作连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M须要多个单词来描述,就使用中划线

了解什么是 B.E.Mreact

Block
将全部东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block
block能够相互嵌套spa

Element
一个Block下的全部Element不管相互层级如何,都要摊开扁平的属于Block
因此 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名code

Modifier
以前咱们常常写的 .current .active 等表达状态element

相关文章
相关标签/搜索