国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一篇關于BEM命名規范

ThreeWords / 1461人閱讀

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

一直以來自己對命名都是比較混亂的，并沒有一個比較好的格式來命名，最近自己碰巧學習到了BEM命名規范，我想談談自己的理解以供自己來學習，同時也可以和各位大佬一起學習。
BEM是一個很有用的方法可以創建復用組件和前端代碼
有三個特性.

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

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

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

BEM的簡介
BEM是一個強大而簡單的命名規范，使得代碼更容易讓人理解，容易和他人協作，容易擴展，更加強壯和明確，最重要的是嚴謹性。
BEM的命名規范可以讓參與網站開發的人都使用同一個代碼庫使用用一種方法。

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

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

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

可以任意移動

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

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



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



元素之間是可以嵌套的


可以擁有任意級別的嵌套


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



 

    

        
            
        
        

    






-可以在不改變元素的情況下改變DOM結構
```


    

        
            
        
    

    



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


    

        
            
        
    





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




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




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





當元素weui-tabbar__item有一個on類型的修飾符時
    

    




key-value類型的修飾符






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


當元素weui-tabbar__item有一個yes的test的修飾符時
    

    



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

 

    




 

    



```  



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

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114220.html

               

                      
               
              

              

                
相關文章

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

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

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

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

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

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

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
ThreeWords

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<