設(shè)計師學(xué)編程遇到BEM
許多人第一次看到BEM都會覺得這東西好繁雜好長好難用啊，與之不同的是我第一次接觸BEM的時候覺得很熟悉挠进，因為所學(xué)專業(yè)是設(shè)計專業(yè)扳碍，所以自然而然對于UI是有所接觸了解的，所以接觸BEM的時候覺得和UI切圖命名規(guī)范有異曲同工之妙闻蛀。
所以便萌發(fā)了一個是否可以用UI切圖命名規(guī)范來理解BEM的想法。
BEM是什么
首先我們的理解BEM是什么您市，BEM是由Yandex團隊提出的一種CSS Class 命名方法觉痛，下文引用來自：https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
BEM – meaningblock,element,modifier– is a front-end naming methodology thought up by the guys atYandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.
大意就是BEM是Yandex團隊提出的這種命名方法可以讓你的CSS類名對于其他開發(fā)者更加友好，也更加有利于維護的意思茵休。
說通俗一點就是BEM就是一個類名規(guī)則薪棒，高級一點呢可以說BEM是一種前端編程思想
BEM的命名模式如下
.block{}
.block__element{}
.block--modifier{}
.block{} 代表了更高級別的抽象或組件
.block__element{} blcok后代， 用于形成一個完成的.block整體榕莺，用（__）連接
.block--modifier{} block不同狀態(tài)或不同版本 用(--)連接
通俗一點來理解的就是
- B Block 網(wǎng)頁某一塊展示功能區(qū)域 div nav
舉個栗子：header-tabs 頭部的 - E element Block里面的某個元素 nav__item
舉個栗子： E .header-tabs__item - M Modifier 某個元素的狀態(tài) .nav--hide nav__item--active
舉個栗子：header-tabs__item--avtive
UI切圖命名又是怎么樣的
UI切圖的命名并不像BEM有團隊提出俐芯。也就是說命名并不是統(tǒng)一的規(guī)范，但是都差不多钉鸯。
一般都是類別+功能+狀態(tài).png這個樣子的吧史，比如：icon_home_default代表的就是圖標主頁默認的意思。當(dāng)然很多公司的大項目都是會分成很多模塊來做唠雕，所以命名格式又分為兩種贸营，一種是通用類型的切圖，還有一種就是各個模塊特有的切圖岩睁。
通用切片命名格式：
組件類別功能狀態(tài)@2x.png
舉例：tabbar_icon_home_default@2x.png
（對應(yīng)中文：標簽欄圖標主頁默認@2x.png）
模塊特有切圖命名規(guī)則：
模塊類別功能狀態(tài)@2x.png
舉例：mail_icon_search_pressed@2x.png
（對應(yīng)的中文為：郵件圖標搜索 默認@2x.png）
（@2x.png是在retina屏幕使用需要添加的）
對比
BEM:
.block{} 代表了更高級別的抽象或組件
.block__element{} blcok后代钞脂， 用于形成一個完成的.block整體，用（__）連接
.block--modifier{} block不同狀態(tài)或不同版本 用(--)連接UI切圖命名：
模塊類別功能狀態(tài)@2x.png
舉例：mail_icon_search_pressed@2x.png
（對應(yīng)的中文為：郵件圖標搜索 默認@2x.png）
對比發(fā)現(xiàn)其實是有所共同點捕儒，都是在一個層級區(qū)塊下接著另一個層級隨后各處狀態(tài)冰啃。但是不同的是UI切圖命名相比BEM要簡單很多，BEM更加規(guī)范刘莹，并且有其他的注意點阎毅，比如：一個修飾符不能再它所屬的上下文環(huán)境之外被使用、不推薦在元素內(nèi)部嵌套元素之類的栋猖。
所以如果需要詳細了解BEM可以訪問大漠老師的網(wǎng)站：http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html
里面給了詳細的講解净薛。
規(guī)范的作用
-
節(jié)省時間，方便團隊協(xié)作
一個app的開發(fā)需要經(jīng)歷產(chǎn)品經(jīng)理->交互設(shè)計師->視覺設(shè)計師->前端->后端蒲拉，產(chǎn)品經(jīng)理需要給出合格的PRD文檔給交互設(shè)計師肃拜，交互設(shè)計師要給出合格的交互原型給視覺設(shè)計師痴腌，視覺設(shè)計師則要做好視覺稿切好圖命好名給前端，前端需要給后端合格的頁面框架樣式燃领。
這是我最開始作圖時的命名士聪，很明顯，只有我自己懂每個頁面是什么意思猛蔽，給前端或許需要交流半天才可以懂剥悟。
包括我最開始所做的交互文檔，也是只有自己才看的懂曼库。
如果各自所做的東西都按著規(guī)范來区岗，那么自然不需要通過交流解釋來浪費時間，當(dāng)然上述流程是以前的流程毁枯，現(xiàn)今流程則是各個職業(yè)都需要相互交流慈缔，并不是簡單的一環(huán)扣一環(huán)。交互設(shè)計師也已經(jīng)需要和前端交流种玛。 - 更好的修改
許多項目都需要進行迭代藐鹤，進行修復(fù)。
UI命名好的話后期修改文件快捷赂韵，前端使用BEM進行編寫代碼也會有利于后期的修改娱节，代碼的復(fù)用性也極高。大部分項目適用相同的組件祭示。 代碼的復(fù)用顯著地降低了開發(fā)成本和時間肄满。 - 提生自身的專業(yè)性
使用公認的規(guī)范操作會讓人覺得你更加專業(yè)。
當(dāng)然并不是所有事情都需要遵守規(guī)范绍移，以一些初創(chuàng)型公司來說悄窃，產(chǎn)品經(jīng)理并不需要些PRD文檔，因為耗費時間蹂窖，而前端也不一定需要使用BEM規(guī)范轧抗，畢竟還有其他的規(guī)范。
