BEM + Emmet = 根本停不下来

很久很久之前。

不知是什么时候，也忘记是什么网站，只记得当时打开后习惯性的右键点击查看源代码。

印象中大概是这个样子的……

<form class="search-form">
<input type="text" class="search-form__username">
<input type="password" class="search-form__password">
<button id="J_Submit" class="search-form__submit--active"></button>
<form>

『噗——』

这是什么鸟命名方式，又是下划线又是连接符，还一次搞两个，作为一只多年专注于只切图不交互的前端汪，对这种命名当然是嗤之以鼻的

『逗逼』

然后就关掉了，也没看内容是什么。

『卧槽这个应该怎么命名』

随后几次切图的时候，又遇到了这个困扰了很多年的问题，也是项目开发阶段中占用了99%时间的一个问题，而且不能去建国医院解决的。

『保持优雅』

如何优雅的命名。作为前端汪，每一次敲下字母的时候，心里都在想着这个页面会被全世界的人们可以看到，也许那里没有公路，也许那里没有办法烤茄子、撸串子，但是却可以看到我的代码。想到这里眼角湿润了。

『诶，那个是什么来着』

突然想起那天的——逗逼命名法，兴趣一下高涨起来，想去了解一下。但是总不能搜索逗逼命名法吧。后来的后来，在和仰慕已久的某美女前端交流后，知道了一个词。

『BEM』

什么是BEM呢，引用站内的一段话

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包...

是的站内就写到了『包...』 然后结束了。

（文章末尾会指向几篇介绍大漠的关于BEM很棒的文章）

咱们来看页首部分的那段代码

<form class="search-form">
<input type="text" class="search-form__username">
<input type="password" class="search-form__password">
<button id="J_Submit" class="search-form__submit--active"></button> <form>

这里的B，指的是Block，也就是"search-form"

这里的E，指的是Element，也就是跟随在search-form后的"username", "password"和"submit"，并且用两个下划线（

__

）表示承接关系

这里的M，指的是Modifier，也就是submit后面的"active"，用两个连接符表示承接关系（

--

）

就酱！

就酱！！

是不是很简单易懂！

困扰了许多年的问题终于解决了。



并且，根本停不下来了。

当然，故事名没有到高潮。

还有，『One more thing...』呢

Emmet，也就是之前的Zen Coding

（文章末尾会有指向相关的文章）

（等我说完再看）

还是刚刚的那段代码，当你使用了Emmet时候，可以省略掉block的字段，直接用一个连接符（-），然后在末尾加上标识符

|bem

来让Emmet按照BEM解析。

就像酱

form.search-form>input.-username+input.-password[type=password]+button.-submit--active|bem

然后按下caps lock上面的tab键，或者Q旁边的tab键就可以了。

是不是很酷炫。

这篇文章只是搬砖引玉，下面是几个说好的连接，很适合深入研究。

大漠的：BEM思想之彻底弄清BEM语法，深入浅出，很适合研究阅读。

Emmet中使用BEM的：Yandex BEM/OOCSS

还有男神的：About HTML semantics and front-end architecture，翻译过来就是如何写出和我一样帅的代码

页面右边的也有『相似文章』，推荐阅读。