今天小编跟大家讲解下有关CSS的BEM规范学习 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的BEM规范学习 的相关资料，希望小伙伴们看了有所帮助。
块（Block）.list 元素(Element)块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子，li.item 是列表的一个子元素
.list{}.list .item{}.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>这样做更有意义
命名空间.l-: 布局(layouts)
.o-: 对象(objects)
.c-: 组件(components)
.js: js的钩子(Javascript hooks)
.is-|.has-: 状态类(state classes)
.t1|.s1: 排版大小(typography sizes)
.u-: 实用类(utility classes)
来源：爱蒂网
