Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【20161104】CSS命名方式=》BEM #48

Open
zhongxia245 opened this issue Nov 4, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@zhongxia245
Copy link
Owner

commented Nov 4, 2016

时间:2016-11-04 20:04:53
原文地址:#48

一、背景

挺早就听说过BEM了,也大概的知道怎么用,但是具体 BEM 指啥,具体有啥要求,还不是很清楚,然后今天就学习了下。

二、BEM(Block,Element,Modifier)

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

重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇文章中介绍的这种命名技术并不是原始的BEM,但却是一个我更喜欢的改进版。无论实际使用了什么样的符号,它们其实都是基于同样的BEM原则。

命名约定的模式如下:

.block{}
.block__element{}
.block--modifier{}
  • .block 代表了更高级别的抽象或组件。
  • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
  • .block--modifier代表.block的不同状态或不同版本。
    之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定,如:
.site-search{} /**/
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

三、总结

  • B: block ,某一块展示/功能区域(div, 比如: nav
  • E: Element, 这块展示/功能区域(div)里面的某个元素,比如: nav__item
  • M:Modifier, 某个元素或者某个块的状态,比如 nav--hide, nav__item--open 啥的

例子:

B:header-tabs //名字随便
E:header-tabs__item //多个tab选项
M:header-tabs__item--active //选中状态

四、参考文章

  1. BEM —— 源自Yandex的CSS 命名方法论

@zhongxia245 zhongxia245 added the CSS label Nov 18, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.