BEM命名方式

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

github_captions.jpg

Block区块:一个逻辑和功能兼备的独立页面组件,也可以称为web组件

嵌套结构:

区块之间可被嵌套使用。
head-marked2.jpg

随意处置:

区块可以被放在页面的任何位置,也可以在页面或者项目之间相互移动。区块的实现靠的是独立的实体,所以允许开发着放在改变其位置,保证整体的功能和外观的效果。
switch-function.jpg

重用:

允许多个相同的区块实例同时存在于一个界面里。
list-of-goods.jpg

Element:区块中无法被用在其他组件上的部分

某个菜单子项是无法用于菜单区块以外的地方的,所以它属于元素。
menu-items2.jpg

Modifier:区块或者元素的外观样式和行为

是否使用修饰符,你可以自由选择。修饰符本质上和HTML的属性类似,相同的区块因为其使用的修饰符不同而不尽相同。
例如:菜单区块的外观可能会因为其所依赖的修饰符变化而发生改变。
menu-current-items.jpg

具体实现:

模块:.Block
模块+状态:.Block_Modifier
模块+子元素:.Block-Element
模块+子元素+状态:.Block-Element_Modifier

命名:

模块:名词;
修饰:大小/尺寸/颜色/形状/新旧/状态 之类的形容词;
绝不能用表象的具体词汇!如主色是蓝色,不能.blue,可以.primary,指不定换成红色了!

参考文章:

  1. BEM: A New Front-End Methodology
  2. Get BEM

标签: none

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

随机文章

已有 3 条评论

  1. block是区块的意思吧?

  2. 良好的命名,便于学习!

  3. 想和贵站交换友情链接,可否?

添加新评论