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

資訊專欄INFORMATION COLUMN

BEM命名及其在sass中的實踐

魏憲會 / 1791人閱讀

摘要：的名稱來源于該方法學的三個組成部分的英文首字母，分別是塊元素和修飾符。這三個不同的組成部分稱為實體。不推薦在元素中嵌套其他元素。其次，不再存在復雜的層級關系，瀏覽器渲染的時候，樣式系統從最右邊的選擇符開始向左進行匹配規則。

Why use it

近幾年web應用的發展可以用瘋狂來形容，依靠瀏覽器的支持以及前端技術和框架的發展，很多應用已經把大量的邏輯從服務器端遷移到了瀏覽器端，使用前后端分離技術，瀏覽器端與用戶進行交互來完成復雜的邏輯。由于這個發展趨勢，Web應用的前端代碼的復雜度大大提高，尤其是 JavaScript 和 CSS 代碼的數量大幅增加，面對空前龐大的css和js代碼量，形成科學的代碼組織方法和命名規范迫在眉睫。

好的命名規則應該滿足以下幾個優點：

安全的命名，不會干擾其它css

我需要很快知道一個 class 位于這個偉大工程的什么位置

class 盡可能少，且結構清晰

嵌套不可以太深，否則會形成難以維護的“謎”之樣式

BEM

BEM 是一種前端項目開發的方法學，由 Yandex 公司提出。BEM 的名稱來源于該方法學的三個組成部分的英文首字母，分別是塊（Block）、元素（Element）和修飾符（Modifier）。這三個不同的組成部分稱為 BEM 實體。

Block——塊

塊即是通常所說的 Web 應用開發中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。塊中封裝了組件相關的 JavaScript、CSS 代碼和 HTML 模板。由于塊是獨立的，可以在應用開發中進行復用，從而降低代碼重復并提高開發效率。塊可以放置在頁面上的任何位置，也可以互相嵌套。

Element——元素

元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。

Modifier——修飾符

修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之后，會有不同的外觀。

// 簡單地說
.block { /* styles */ }
.block__element { /* styles */ } 
.block--modifier { /* styles */ }
舉個栗子

如何使用呢BEM命名方法呢？請先看以下例子：

//我們要為這個菜單寫樣式

    
    
  • Menu Item 1
    • 
    
  • Menu Item 2
    • 
    
  • Menu Item 3
    •
1.“祖傳”命名

放在以前，我們或許會這么寫：

    
    
  • Menu Item 1
    • 
    
  • Menu Item 2
    • 
    
  • Menu Item 3
    •

看了一下，還是多清爽的。但是各位朋友是否注意到了一個問題：子元素item和其父元素menu，從命名上看，關系似乎太不緊密。一個box也可以有item子類，一個xxx也可以包含一個item子類。看看其樣式的寫法：

//sass
.nav {
   list-style: none;
   .item {
       font-weight: bold;
      &.selected {
           color: red;
           }
      }
 }
 
//編譯后產生的css
.nav {
 list-style: none;
}
.nav .item {
 font-weight: bold;
}
.nav .item.selected {
 color: red;
}

從樣式文件上看，仿佛也沒有太大問題，但是，這是在我們代碼層數較少的情況。如果是一個復雜的頁面元素，我們sass層級會非常深。編譯后的css，層級也會很深。

2.BEM命名

現在我們使用BEM再來編寫看看：

    
    
  • Menu Item 1
    • 
    
  • Menu Item 2
    • 
    
  • Menu Item 3
    • 

//sass
.nav {
 list-style: none;

 &__item {
   font-weight: bold;

   &--selected {
     color: red;
   }
 }
}

//使用sass編譯后的css是
.nav {//菜單
 list-style: none;
}
.nav__item {//菜單item
 font-weight: bold;
}
.nav__item--selected { //被選中的菜單item
 color: red;
}

乍看之下，根據 BEM 命名規則產生的 CSS 類名都會很復雜，但實際上在熟悉了命名規則之后，可以很容易理解其含義。其次，css不再存在復雜的層級關系，瀏覽器渲染的時候，樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出，減少層級就能提升性能，對應靜態css文件大小也會減少。

很多人會吐槽兩個下劃線和兩個橫杠作為連接符，并不優雅。但是我覺得，BEM是一種思想，是我們需要理解的，至于我們用什么樣的連接符，什么樣的方式實現，可以根據自己項目的情況考慮。

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

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

相關文章

  • BEM命名及其在sass中的實踐

    摘要：的名稱來源于該方法學的三個組成部分的英文首字母，分別是塊元素和修飾符。這三個不同的組成部分稱為實體。不推薦在元素中嵌套其他元素。其次，不再存在復雜的層級關系，瀏覽器渲染的時候，樣式系統從最右邊的選擇符開始向左進行匹配規則。 Why use it 近幾年web應用的發展可以用瘋狂來形容，依靠瀏覽器的支持以及前端技術和框架的發展，很多應用已經把大量的邏輯從服務器端遷移到了瀏覽器端，使用前后...

    Scott 評論0 收藏0

  • 前端編碼規范之：樣式（scss）編碼規范

    摘要：前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂，盡量保持不重復沖突，盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱，會生成。 前端編碼規范之：Git使用規范 前端編碼規范之：樣式（scss）編碼規范 前端編碼規范之：HTML結構規范 前端編碼規范之：Vue最佳實踐 前端編碼規范...

    reclay 評論0 收藏0

  • CSS哲學偽命題

    摘要：最早遇到的大概的是命名的問題了吧，因為本身積累的詞匯量就少，動不動就沒單詞可用了。用于解決項目命名規則問題。其哲學理念是模塊化，功能單一性，關注點分離。借助而解決了中的命名空間的問題，使得單文件變得簡單清晰。 標題黨。這篇文章斷斷續續的修改過好幾次，也沒有滿意，本來是想總結一下我這些零散的 CSS 知識結構，可能由于知識體系不全面，總是沒能把知識點串聯成一個通順的內容。貼出來權當大家一...

    Shimmer 評論0 收藏0

  • CSS Modules詳解及React中實踐

    摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

    wemall 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<