css之命名规范 BEM

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

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

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

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

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

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

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

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

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

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

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

css之命名规范 BEM相关推荐

css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块区块的定义是:一个逻辑和 ...
css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
CSS命名规范-BEM
BEM 什么是BEM BEM命名的好处 BEM命名的问题什么是BEM BEM是一种命名规范.模块名+元素名+修饰器名比如Instagram团队使用的驼峰式 .blockName-elementNa ...
CSS命名规范 BEM
在我们开发的时候,写了一个模块,在现有页面中测试都没问题.一段时间后,新需求新页面,该页面一打开,突然发现页面中样式都变样了,一查问题,原来是其他组件的样式和该页面的样式相互覆盖了.我相信大家在工作的 ...
div+css中命名规范
上次给别人演示div的效果时,写了css样式却一直不能呈现,最后不小心发现自己在写css样式时候,给一个class命名为数字开头的名称,才想起来自己去年刚学习样式表时候也出现此问题,最后被我解决掉的, ...
(35) css企业命名规范
一.企业命名规范网页内容类标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: ...
js和css的命名规范
笔者在撸代码是也会遇到不知道给元素或变量起什么名字的问题,中文拼音太俗气,随便敲几个字母又影响代码的查读性.于是总结这些命名规范.有些资料来源于网络一 .css命名规范 1.命名规则说明: 1) ...
css外部命名规范,前端开发较全CSS命名规范
前端开发用什么框架吗前端开发新框架前端开发app混合开发框架文件名命名规范模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...
CSS样式的格式命名,CSS命名规范：BEM
什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写块: 组件元素:块的子节点修饰符:改变某个块的外观的标志,不同状态或不同版本 Yan ...

css之命名规范 BEM

css之命名规范 BEM相关推荐

最新文章

热门文章