BEM 基础介绍 DAY41

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 设计模式
若有任何问题 或 内容有误
请不吝啬的跟我说唷