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