摘要：簡(jiǎn)介前端命名方法論是由團(tuán)隊(duì)提出的一種前端命名方法論，是一個(gè)非常有用，強(qiáng)大，簡(jiǎn)單的命名約定，可以讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確而且更加嚴(yán)密。

BEM——前端命名方法論

BEM 是由 Yandex 團(tuán)隊(duì)提出的一種前端命名方法論，是一個(gè)非常有用，強(qiáng)大，簡(jiǎn)單的命名約定，可以讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確而且更加嚴(yán)密。

BEM 命名約定模式

.block{}
.block__element{}
.block--modifier{}

其中

.block：表示一個(gè)抽象的塊，或一個(gè)獨(dú)立的組件

.block__element：element是.block的子節(jié)點(diǎn)，表示element屬于某個(gè).block，用于形成一個(gè)完整的.block整體，__是向下降級(jí)的意思

.block--modifier：表示某個(gè)節(jié)點(diǎn)的狀態(tài)

為了更清楚感受BEM的命名方式，我仿制了一下微信的個(gè)人頁(yè)面，其中圖標(biāo)來(lái)自Iconfont矢量圖標(biāo)庫(kù),圖標(biāo)命名直接使用其原始的命名

一開(kāi)始我設(shè)計(jì)的html，此時(shí)我對(duì)BEM有些認(rèn)識(shí)，但是使用上還是有點(diǎn)問(wèn)題，這時(shí)，我將整個(gè)頁(yè)面看作一個(gè)模塊分為三部分：page__hd，page__bd，page__ft

    

        
微信
        

            ***
        
    
    

        

            

                ***
            
            

                

                    ***
                
                

                    ***
                
            
        
        

            

                

                    ***
                
                

                    ***
                
                ***
                

                    ***
                
            
        
    
    

        

            ***
        
        

            ***
        
        

            ***
        
        

            ***
        
    

但當(dāng)一個(gè)模塊內(nèi)的部分多了些的時(shí)候，比如page__bd內(nèi)部的元素，我覺(jué)得我的命名有些混亂，為了給它命名還得百度翻譯，而且開(kāi)始命名完后寫(xiě)css時(shí)發(fā)現(xiàn)自己還是不太清楚它的位置，寫(xiě)完css后發(fā)現(xiàn)還有有些沒(méi)有使用上的類(lèi)名比如.right

我修改了我的html命名，感覺(jué)上結(jié)構(gòu)更加清晰而且觀察了一下微信的頁(yè)面，頭部和底部是不變的，每個(gè)頁(yè)面都是一樣的，還有page__bd內(nèi)的page__bd__list在微信的發(fā)現(xiàn)頁(yè)面也是開(kāi)始可以使用的，這樣的命名就比較好復(fù)用。

    

        
微信
        

            
            
        
    
    

        

            
            

                

                    
EIVE
                    
w1074418022
                
                

                    
                
            
        
        

            

                

                    
                    錢(qián)包
                
                

                    
                    收藏
                
                

                    
                    相冊(cè)
                
                

                    
                    卡包
                
                

                    
                    表情
                
                

                    
                    設(shè)置
                
            
        
    
    

        

            
            
微信
        
        

            
            
通訊錄
        
        

            
            
發(fā)現(xiàn)
        
        

            
            
我
        
    

第一：讓你的代碼更容易閱讀和理解，可以清晰的指出某個(gè)節(jié)點(diǎn)屬于哪個(gè)塊下，層級(jí)關(guān)系比較明顯，也盡量避免使用節(jié)點(diǎn)承載的內(nèi)容來(lái)定義節(jié)點(diǎn)，這樣更好的復(fù)用某個(gè)模塊

第二：BEM 的降級(jí)關(guān)系不需要迫切的去使用，比如page__hd內(nèi)的.title，因?yàn)橐粋€(gè)頁(yè)面只有一個(gè)title，所以使用page__title就可以代表，不需要使用page__hd__title

第三：使用BEM是為了讓我們的代碼更清晰，更易維護(hù)，如果它使得你的代碼更難維護(hù)，更難理解，也不必糾結(jié)

github 項(xiàng)目地址：https://github.com/EIVE/wx_ho...

以上是我學(xué)習(xí)BEM的一下感受，希望大家可以有所收獲，其中可能有些不太恰當(dāng)?shù)牡胤剑蚕Ｍ蠹铱梢远嘟o我提一些意見(jiàn)