好程序员分享如何看待CSS中BEM的命名方式?

简介:   好程序员分享如何看待CSS中BEM的命名方式?BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。  任何一个东西的存在都有其存在的道理,如果他毫无价值,那么肯定会被淘汰,后人可能都不了解,甚至都不会出现在后人的世界里。

  好程序员分享如何看待CSS中BEM的命名方式?BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。

  任何一个东西的存在都有其存在的道理,如果他毫无价值,那么肯定会被淘汰,后人可能都不了解,甚至都不会出现在后人的世界里。

  关于BEM命名其最大的争议就是其命名风格,它鼓励一级一级的写的非常具体,但是会很长。如此常的命名会影响书写效率,名称过长代码量就会增多,文件体积就会变大(在gzip下这个不算是个问题),从而会影响传输速度,用户体验度就低,但是作为一个职业人我们都不能单纯把个人喜好和习惯作为借口来拒绝或否定其用途。

  风格对于使用者来说并不是很重要,关键的是看其效果。正所谓人们常说的“不看疗程,看疗效”。

  从扩展性上来看,嵌套过多阅读性差,超过3层就很难阅读了;嵌套越多,选择器的层级也会随之增多,那么性能不知不觉就会变差;如此长的名字,书写上想冲突都难。

  从编程原则上来说,这种命名方式不会暴露抽象类。假如样式变了需要继承另一个抽象类,不需要改HTML,只需要改css即可。

  团队开发中,风格无非是一种形式,可以约束人们达到一定程度上的统一。内部沟通会极大降低沟通成本。

  BEM命名的方法虽然有自身的不足之处,但至少他可以使我们命名的时候达到一定的统一,我们可以学习其优秀的方面将其纳为己用。在实际项目开发中将其巧妙而又灵活的运用起来也未尝不是一件坏事。

相关文章
|
4月前
|
前端开发 程序员
【CSS教程】农村小伙写出CSS完全教程帮助十万农村程序员就业迎娶白富美,出任CEO,登上人生巅峰
【CSS教程】农村小伙写出CSS完全教程帮助十万农村程序员就业迎娶白富美,出任CEO,登上人生巅峰
66 0
|
前端开发 JavaScript 异构计算
CSS隐藏元素的几种方式
CSS隐藏元素的几种方式
196 0
|
前端开发 JavaScript
CSS的命名是规范的吗?应该如何优化?底层原理是什么?
CSS的命名是规范的吗?应该如何优化?底层原理是什么?
|
前端开发 容器
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
131 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
|
前端开发 容器
CSS布局的三种方式
CSS布局的三种方式:1.绝对定位 2.相对定位 3.浮动
96 0
CSS布局的三种方式
|
前端开发
【前端】【样式】CSS居中的三种方式
【前端】【样式】CSS居中的三种方式
63 1
|
程序员
七夕来临,程序员该如何花式表白?html+css实现简单七夕表白
文章目录 1 效果展示 2 源码及环境 3 浅谈七夕 3.1 七夕由来 3.2 七夕风俗
七夕来临,程序员该如何花式表白?html+css实现简单七夕表白
|
前端开发 UED
CSS盒子模型隐藏的几种方式
CSS盒子模型隐藏的几种方式
139 0
CSS盒子模型隐藏的几种方式
|
前端开发 JavaScript 开发者
CSS 样式加载方式| 学习笔记
快速学习 CSS 样式加载方式。
102 0
CSS 样式加载方式| 学习笔记