成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一篇關(guān)于BEM命名規(guī)范

ThreeWords / 1478人閱讀

摘要：是一個(gè)很有用的方法可以創(chuàng)建復(fù)用組件和前端代碼有三個(gè)特性易用性，使用只需要使用的命名規(guī)范就可以。的簡介是一個(gè)強(qiáng)大而簡單的命名規(guī)范，使得代碼更容易讓人理解，容易和他人協(xié)作，容易擴(kuò)展，更加強(qiáng)壯和明確，最重要的是嚴(yán)謹(jǐn)性。

一直以來自己對命名都是比較混亂的，并沒有一個(gè)比較好的格式來命名，最近自己碰巧學(xué)習(xí)到了BEM命名規(guī)范，我想談?wù)勛约旱睦斫庖怨┳约簛韺W(xué)習(xí)，同時(shí)也可以和各位大佬一起學(xué)習(xí)。
BEM是一個(gè)很有用的方法可以創(chuàng)建復(fù)用組件和前端代碼
有三個(gè)特性.

易用性，使用BEM只需要使用BEM的命名規(guī)范就可以。

單元性，使用獨(dú)立的塊和CSS選擇器，可以使你的代碼可重用和單元化。

靈活性，使用BEM后，方法和工具可以按照自己喜歡的方式去組織和配置。

BEM的簡介
BEM是一個(gè)強(qiáng)大而簡單的命名規(guī)范，使得代碼更容易讓人理解，容易和他人協(xié)作，容易擴(kuò)展，更加強(qiáng)壯和明確，最重要的是嚴(yán)謹(jǐn)性。
BEM的命名規(guī)范可以讓參與網(wǎng)站開發(fā)的人都使用同一個(gè)代碼庫使用用一種方法。

BEM分別是塊（Block），元素（Element），修飾符（Modifier）

塊（Block）
是一個(gè)獨(dú)立的頁面組件跟其他的塊區(qū)分開來，相當(dāng)于網(wǎng)頁中的組件Block封裝了行為，模板，樣式和其他技術(shù)。獨(dú)立的Block可以復(fù)用，促進(jìn)項(xiàng)目的開發(fā)。

模塊與模塊之間可以嵌套，可以有任意級別的嵌

可以任意移動

>>
    Block可以在頁面內(nèi)任意的移動，也可以在頁面之間或項(xiàng)目之間移動。  
    Block作為獨(dú)立的實(shí)體來實(shí)現(xiàn)，使得在頁面上改變Block改變位置并讓其位置和外觀不改變的簡單。  
3. 可復(fù)用  
    一個(gè)界面可以同一個(gè)Block的幾個(gè)實(shí)例

元素（Element）
元素是模塊Block的重要組成部分，且不能脫離模塊多帶帶的使用



元素的名稱用來描述它的目的  
一個(gè)完整的元素結(jié)構(gòu)block-name__element-name,塊名和元素名使用（__）雙下劃線分割。



元素之間是可以嵌套的


可以擁有任意級別的嵌套


一個(gè)元素總是模塊Block的一部分這意味著元素名稱不能為block__element__element這種結(jié)構(gòu)，而block__element這種結(jié)構(gòu)才是正確的。



 

    

        
            
        
        

    






-可以在不改變元素的情況下改變DOM結(jié)構(gòu)
```


    

        
            
        
    

    



```
-一個(gè)元素總是模塊的一部分，不能多帶帶的使用。如下weui-tabbar模塊里面的p標(biāo)簽元素放在模塊外，這是不正確的。
```


    

        
            
        
    





```
-元素是可選擇的，不是所有模塊都必須擁有元素




修飾符（Modifier）  
 Modifier是BEM的一個(gè)實(shí)體，它定義了block或element的行為或外觀  
 Modifier可用可不用  
 Modifier本質(zhì)和html的屬性很相似，同一個(gè)block會因?yàn)槭褂肕odifier而與之前看起來不一樣。  
 -修飾符的名字與模塊和元素的名字使用（_）單下劃線  
 命名模式遵循如下格式:




Boolean類型的修飾符  
block-name_modifier--name  
block-name__element-name--modifier-name





當(dāng)元素weui-tabbar__item有一個(gè)on類型的修飾符時(shí)
    

    




key-value類型的修飾符






block-name--modifier-name--modifier-value  
block-name__element-name--modifier-name--modifier-value
```
  


當(dāng)元素weui-tabbar__item有一個(gè)yes的test的修飾符時(shí)
    

    



```
>-一個(gè)修飾符不能多帶帶的使用
>>一個(gè)修飾符不能脫離模塊或元素多帶帶的使用，一個(gè)修飾符應(yīng)該改變一個(gè)實(shí)體的外觀，行為或者狀態(tài)，而不是替換它。
```

 

    




 

    



```  



以上是我經(jīng)過對BEM規(guī)范學(xué)習(xí)的一些理解，大家互相學(xué)習(xí)，有很多的不足之處希望大家指出。還有很多沒有學(xué)習(xí)到的東西，自己也會在未來的時(shí)間里不斷學(xué)習(xí)來提高自己。
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114220.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    CSS規(guī)范--BEM入門
    
                                                     
    摘要：一開始，公司推出的，包括了規(guī)范以及其配套構(gòu)建工具。代表的不同狀態(tài)或不同版本。再來看一個(gè)之前用常規(guī)方式命名的的例子這些類名真是太不精確了，并不能告訴我們足夠的信息。

這段時(shí)間在整理前端部分的代碼規(guī)范，前面提到的CSS規(guī)范里面會涉及到選擇器的命名，就參考BEM的命名規(guī)范，內(nèi)容整理如下，供大家參考，請斧正！如大家有興趣，可移步至CSS編碼規(guī)范

BEM是由Yandex公司推出的一套CSS命名...
    
                                                   
                          
    
                                
    
                                    li21
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性
    
                                                     
    摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。

本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁應(yīng)用都可以使用css-module來解決這個(gè)問題
作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...
    
                                                   
                          
    
                                
    
                                    lk20150415
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性
    
                                                     
    摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。

本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁應(yīng)用都可以使用css-module來解決這個(gè)問題
作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...
    
                                                   
                          
    
                                
    
                                    crossoverJie
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    css進(jìn)階
    
                                                     
    摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個(gè)位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。

一勞永逸的搞定 flex 布局
尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由...
    
                                                   
                          
    
                                
    
                                    import.
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<