亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

ThreeWords / 1540人閱讀

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

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

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

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

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

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

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

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

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

可以任意移動

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

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



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



元素之間是可以嵌套的


可以擁有任意級別的嵌套


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



 

    

        
            
        
        

    






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


    

        
            
        
    

    



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


    

        
            
        
    





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




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




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





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

    




key-value類型的修飾符






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


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

    



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

 

    




 

    



```  



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

            
                     
             
               

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

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

               

                      
               
              

              

                
相關(guān)文章

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

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

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

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

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

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

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
ThreeWords

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<