css之命名规范 BEM

本文分享了作者从抵触到接受BEM方法的过程。起初因不熟悉BEM规范而感到困扰,在实践中逐渐理解其优势:减少样式冲突、提高代码可维护性。作者通过实例对比,强调了BEM在构建组件化、结构化的项目中的价值。

这篇文章主要是记录下我从讨厌,习惯,喜欢,热爱BEM方式的心路历程

刚入职水滴, 第一个需求是做5个落地页,开了需求,过了设计图,so easy
一切都在计划中,提测,准备上线
最后阶段codereview 居然打回重写,原因是css要按照BEM规范,迷茫脸 what?what?what? 这个是什么鬼

Google 必应 百度 各种搜查,了解到优缺点,以及研究其他项目的实践
然后总结了自己的一套缺点,来说服领导

  1. 代码量比较多,html中class会特别长,书写特别麻烦而且还丑
  2. 现在每个代码块中的style都加入了scope 不会对其他样式造成影响
  3. 需要完善的说明文档和规则

吧啦吧啦吧啦吧啦...........
估计领导也懒得和我这种白痴争辩,最后用了,谁用谁知道的傲慢脸和一句:我们就这样规定的必须按照BEM方式,来结束了我的雄辩

就这样被迫开启了我的BEM处女使用

中间查阅了大量的资料 以及看了好几个的项目实践
而且在项目中也开始了好几个页面的使用,一切都在习惯中

现在时隔两个月,翻看了之前的代码以及对比了现在的代码

clipboard.png

clipboard.png

clipboard.png

clipboard.png

然后发现之前写的都是屎,一坨屎,加粗标红
我知道现在也不是使用的很好,但是已经再越来越好了,我相信会越来越好
在使用过程中,总结一下特点

  • 按组件划分类名,减少层次关系,实现扁平化、语义化,通过唯一的类名来避免不必要的样式继承,提高渲染效率。

最后的最后
使用BEM并不是最终目的,而是将项目合理地组件化,将组件合理地结构化,构建易维护、易扩展的程序

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值