资讯专栏INFORMATION COLUMN

css之命名规范 BEM

NicolasHe / 1154人阅读

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

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

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

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

代码量比较多,html中class会特别长,书写特别麻烦而且还丑

现在每个代码块中的style都加入了scope 不会对其他样式造成影响

需要完善的说明文档和规则

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

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

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113493.html

相关文章

  • 前端编码规范:样式(scss)编码规范

    摘要:前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂,尽量保持不重复冲突,尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称,会生成。 前端编码规范之:Git使用规范 前端编码规范之:样式(scss)编码规范 前端编码规范之:HTML结构规范 前端编码规范之:Vue最佳实践 前端编码规范...

    reclay 评论0 收藏0
  • BEM实战扒一扒淘票票页面

    摘要:扒一扒淘票票界面淘票票界面写的挺美观的,但是最近看了看淘票票的命名方式,觉得稍有不妥。命名与页面内容挂钩,代码复用性低。 BEM解析 BEM是一套CSS国际命名规范,是一个非常有用的功能强大且简单的命名约定,它能使前端代码更易读,易于理解易于扩展。BEM是块(block)、元素(element)、修饰符(modifier)的缩写。 B:Block是块,一个独立的组件,将所有东西都划分...

    godlong_X 评论0 收藏0
  • CSS规范--BEM入门

    摘要:一开始,公司推出的,包括了规范以及其配套构建工具。代表的不同状态或不同版本。再来看一个之前用常规方式命名的的例子这些类名真是太不精确了,并不能告诉我们足够的信息。 这段时间在整理前端部分的代码规范,前面提到的CSS规范里面会涉及到选择器的命名,就参考BEM的命名规范,内容整理如下,供大家参考,请斧正!如大家有兴趣,可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名...

    li21 评论0 收藏0
  • 关于css命名的一点思考,探讨一下css命名空间的可行性

    摘要:毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验,希望大神们来探讨一下可行性。 本文主要是探讨传统项目中的css命名,vue、react等单页应用都可以使用css-module来解决这个问题 作为一名初级前端,免不了要切图(写css、html静态部分),写css最头痛的就是给class命名了,词汇有限,本人又比较懒,...

    lk20150415 评论0 收藏0
  • 关于css命名的一点思考,探讨一下css命名空间的可行性

    摘要:毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验,希望大神们来探讨一下可行性。 本文主要是探讨传统项目中的css命名,vue、react等单页应用都可以使用css-module来解决这个问题 作为一名初级前端,免不了要切图(写css、html静态部分),写css最头痛的就是给class命名了,词汇有限,本人又比较懒,...

    crossoverJie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<