CSS的BEM规范学习

块（Block）

/* 常规写法和BEM写法相同 */
.list   

元素(Element)

块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。
如上面的例子，li.item 是列表的一个子元素

/* 常规写法 */
.list{}
.list .item{}

/* BEM写法 */
.list{}
.list__item{}

修饰符(modifier)

一个“修饰符”可以理解为一个块的特定状态
比如

多种颜色的按钮

.btn-list{}
.btn-list .btn_red{}
.btn-list .btn_green{}

.btn-list{}
.btn-list__btn_red{}
.btn-list__btn_green{}

被激活的列表项

.list{}
.list.select{}
.list .item{}
.list .item.active{}

.list{}
.list_select{}
.list__item{}
.list__item_active{}

书写原则

原则上不会出现2层以上选择器嵌套

推荐写法

<ul class="xxx">
    <li class="xxx__item">第一项
        <div class="xxx__product-name">我是名称</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二项 且 当前选择项
        <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
         <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>

.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

无意义的__

<section class="comments"> 
    <h2 class="comments__title"></h2> 
    <article class="comments__comment"> 
        <h3 class="comments__comment-title"></h3> 
    </article> 
    <article class="comments__comment"> 
        <h3 class="comments__comment-title"></h3> 
    </article> 
    <!-- ... --> 
</section>

用新的块来保存新元素

<section class="comments"> 
    <h2 class="comments__title"></h2> 
    <article class="comment"> 
        <h3 class="comment-title"></h3> 
    </article> 
    <article class="comment"> 
        <h3 class="comment-title"></h3> 
    </article> 
    <!-- ... --> 
</section>

这样做更有意义

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

命名空间

.l-: 布局(layouts) 

.o-: 对象(objects) 

.c-: 组件(components)

.js: js的钩子(JavaScript hooks)

.is-|.has-: 状态类(state classes) 

.t1|.s1: 排版大小(typography sizes) 

.u-: 实用类(utility classes)