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，翻譯過來就是如何寫出和我同樣帥的代碼

頁面右邊的也有『類似文章』，推薦閱讀。