BEM
B: Block(區塊)
E: Element(元素) __ 雙下底線
M: Modifire(修飾符號) -- 雙中線

官網:http://getbem.com/

這裡舉一個例子

<ul class="menu"> 
    <li class="menu__item menu__item--active">1</li>
    <li class="menu__item">2</li>
    <li class="menu__item">3</li>
</ul>

menu: Block(區塊)
menu__item: Element(元素)
menu__item--active: Modifire(修飾符號)
所以 menu這個區塊會有 3個menu__item元素

BEM 使用 Sass撰寫

.menu{
    width: 100px;
    &__item{
        height: 50px;
        &--active{
            background: #000;
        }
    }
}

編譯後的 css

.menu {
  width: 100px;
}
.menu__item {
  height: 50px;
}
.menu__item--active {
  background: #000;
}

CodePen: https://codepen.io/wemyferb/pen/zYBGJjz

那 BEM 就介紹到這裡啦
明天將介紹 7+1 Sass 設計模式
若有任何問題 或 內容有誤
請不吝嗇的跟我說唷