BEM命名规范

Posted 2021-02-14 aoxiangsky

  什么是BEM呢？其实它就是css类的一种命名方式，由Yandex团队提出的，不过也有一些大牛们不喜欢这种命名方式，认为他过于复杂，冗余，降低了编码效率，不过基于存在即合理，我们还是有必要了解一下他的命名规则。

    首先来理解一下什么是B：即block，这个block不是css中样式的block，而是模块的意思，将所有的样式类分成一些模块，有点类似于语义化的html，比如将样式列分为header，section，footer等。

    E:Element，元素，比如说这个组件是按钮，即可将元素名起为btn，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。

    M:modefiy，修饰器名。在编写前端页面代码的时候我们经常会遇到以下的状态：比如写一个下拉菜单，我们通常会编一个.active用来表示当前点击的项，那么，在BEM中，这个就可以放在modefiy中。

    总结的来说，BEM的命名规则就是：block-name_element-name--modefiy-name。

 

了解什么是 B.E.M

Block
!误区:这个block并非inline-block里的block,
而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block
block可以相互嵌套

Element
!误区:如果一个Element-son是另一个Element-father的子元素,
那么写法是 Block__Element-father__Element-son_Modifer,嵌套多了会很长么?
不是的!!!
一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block
所以 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名

Modifier
之前我们经常写的 .current .active 等表达状态

 

从Class中解读B.E.M

我们常说CSS的注释要写WHY,而不是写WHAT,看Class命名最好就知道是WHAT
BEM提出的一个概念是用连接符号来表达,它并不规定必须用什么连接符,但规定用不同连接符做团队内约定区分BEM 3类元素

例如我们组内约定
__双下划线代表B和E连接例如 menu__item
_单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active
-中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线

打字会抽搐吧...
你听说过Emmet么?再不济Zen Coding有听说过吧?实在不行听说过安利也行啊
FYI http://docs.emmet.io/filters/bem/