好程序员分享如何看待CSS中BEM的命名方式?
好程序员分享如何看待CSS中BEM的命名方式?BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。
任何一个东西的存在都有其存在的道理,如果他毫无价值,那么肯定会被淘汰,后人可能都不了解,甚至都不会出现在后人的世界里。
关于BEM命名其最大的争议就是其命名风格,它鼓励一级一级的写的非常具体,但是会很长。如此常的命名会影响书写效率,名称过长代码量就会增多,文件体积就会变大(在gzip下这个不算是个问题),从而会影响传输速度,用户体验度就低,但是作为一个职业人我们都不能单纯把个人喜好和习惯作为借口来拒绝或否定其用途。
风格对于使用者来说并不是很重要,关键的是看其效果。正所谓人们常说的“不看疗程,看疗效”。
从扩展性上来看,嵌套过多阅读性差,超过3层就很难阅读了;嵌套越多,选择器的层级也会随之增多,那么性能不知不觉就会变差;如此长的名字,书写上想冲突都难。
从编程原则上来说,这种命名方式不会暴露抽象类。假如样式变了需要继承另一个抽象类,不需要改HTML,只需要改css即可。
团队开发中,风格无非是一种形式,可以约束人们达到一定程度上的统一。内部沟通会极大降低沟通成本。
BEM命名的方法虽然有自身的不足之处,但至少他可以使我们命名的时候达到一定的统一,我们可以学习其优秀的方面将其纳为己用。在实际项目开发中将其巧妙而又灵活的运用起来也未尝不是一件坏事。
感谢关注好程序员技术分享
转载于:https://blog.51cto.com/14249543/2372319
好程序员分享如何看待CSS中BEM的命名方式?相关推荐
- 问答:如何规划CSS 中 的命名方式 如何看待 CSS 中 BEM 的命名方式?
好多盆友 很纠结 css命名规则 怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量,但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人 ...
- html类名定义规则_好程序员分享Java语言中的标识符规则
好程序员分享Java语言中的标识符规则,在编程过程中,经常需要在程序中定义一些符号来标记一些名称,如包名.类名.方法名.参数名.变量名等,这些符号被称为标识符.标识符可以由任意顺序的大小写字母.数字. ...
- 好程序员分享做HTML5页面你要懂得这些
为什么80%的码农都做不了架构师?>>> 好程序员分享做HTML5页面你要懂得这些,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过HTML5,处在懵懂的阶段,他们往往 ...
- 好程序员分享大势所趋 HTML5成Web开发者最关心的技术
为什么80%的码农都做不了架构师?>>> 好程序员分享大势所趋 HTML5成Web开发者最关心的技术,最近,在Stack Exchange上出现了一个比较热门的问题:Web开发 ...
- 好程序员分享Web前端知识之HTML
今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...
- 一个程序员分享8年的开发经验
[转]一个程序员分享8年的开发经验 时间:2011-08-10 10:25 来源: 风尘浪子 作者:风尘浪子 围观: 635 次 在中国有很多人都认为IT行为是吃青春饭的,如果过了30岁就很难有机 ...
- 10款Web程序员必备的CSS工具
对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或 ...
- 好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
最新文章
- oracle存储过程00054,oracle执行存储过程报错:ORA-12011
- Java项目-Javaweb实现个人博客
- 6个2教你认识递归的力量!
- a,b互换,不使用中间变量
- 问题1 机器学习篇 如何解决过拟合(overfiting)?
- Pycharm连接git服务器的方法
- 5、位运算符(7个):实例
- 单链表的整表创建以及整表删除
- 分布式事务最终一致看这篇“大白话”的实践
- android系统里面的mic是哪个app_安利 | 那些错过会后悔一年的法语APP
- Linux命令之 mkfs -- 在特定的分区创建 Linux 文件系统
- 【渝粤教育】国家开放大学2018年秋季 8177-21T (1)工程经济与管理 参考试题
- Filezilla 服务器发回了不可路由的地址。使用服务器地址代替
- 文献阅读High-throughput sequencing of the transcriptome and chromatin accessibility in the same cell
- 【图像处理】【去模糊】图像去模糊之初探--Single Image Motion Deblurring
- 您已经成为CSDN博客专家
- Rect.OverLaps() 改进
- python 实现雪容融
- 八图片在线图片设置付费
- excel怎么启用宏_轻便免费的Excel合并工具,支持wps和office全系统