脚本宝典收集整理的这篇文章主要介绍了谈谈BEM规范(含代码),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
引用一句经典名言在编程的世界里其中一件最难的事情就是命名,不管是设计到编程语言还是标记语言都会有命名的需求。今天聊的就是关于css的命名规范的发展过程以及演变。
reset.css,common.css
。scope
来限制,组件之间是可以相互引入使用的,一个组件可以拆分成多个小组件,此时样式命名规范就需要使用BEM规范,从而达到组件样式的独立性。代表block,也就是块,每一个块都是一个独立的功能,块之间可以相互嵌套。
-
链接--
链接代表element,也就是元素,元素是依赖于块存在,不能独立存在,必须嵌套在块内部。
-
链接__
链接--
链接代表modifier, 也就是修饰符,修饰符一般是对于元素或者块的状态和外观进行修饰。
-
链接 <div class="qf-rate">
<span class="qf-rate__item qf-rate__item--active">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
</div>
.qf-rate{
width: 300px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.qf-rate__item{
width: 48px;
height: 48px;
cursor: pointer;
background: url('./img/star.png');
}
.qf-rate__item--active{
background: url('./img/star_active.png');
}
BEM规范只是前端组件化发展过程中的规范,都是为了组件化服务,并不是唯一的规范,是否采用这个规范目的是为了团队协作和更好的维护迭代,不是为了规范而规范。
以上是脚本宝典为你收集整理的谈谈BEM规范(含代码)全部内容,希望文章能够帮你解决谈谈BEM规范(含代码)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。