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

BEM——前端命名方法論

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

BEM 命名約定模式

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

其中

.block：表示一個抽象的塊，或一個獨立的組件

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

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

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

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

    

        
微信
        

            ***
        
    
    

        

            

                ***
            
            

                

                    ***
                
                

                    ***
                
            
        
        

            

                

                    ***
                
                

                    ***
                
                ***
                

                    ***
                
            
        
    
    

        

            ***
        
        

            ***
        
        

            ***
        
        

            ***
        
    

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

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

    

        
微信
        

            
            
        
    
    

        

            
            

                

                    
EIVE
                    
w1074418022
                
                

                    
                
            
        
        

            

                

                    
                    錢包
                
                

                    
                    收藏
                
                

                    
                    相冊
                
                

                    
                    卡包
                
                

                    
                    表情
                
                

                    
                    設(shè)置
                
            
        
    
    

        

            
            
微信
        
        

            
            
通訊錄
        
        

            
            
發(fā)現(xiàn)
        
        

            
            
我
        
    

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

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

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

github 項目地址：https://github.com/EIVE/wx_ho...

以上是我學(xué)習(xí)BEM的一下感受，希望大家可以有所收獲，其中可能有些不太恰當(dāng)?shù)牡胤?，也希望大家可以多給我提一些意見