美文网首页
如何看待CSS中BEM的命名方式?

如何看待CSS中BEM的命名方式?

作者: ui设计好分享 | 来源:发表于2018-05-04 10:32 被阅读0次

BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。

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

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

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

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

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

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

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

阅读全文

相关文章

  • 如何看待CSS中BEM的命名方式?

    BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一...

  • Scss

    Scss 1.BEM命名方式 BEM是css的一种命名方式。B既Block,模块的意思;E既Element,元素的...

  • CSS架构(命名组织方式)札记

    css组织命名方式(CSS架构)主要有OOCSS,BEM,SMACSS,MVCSS等。关于css framewor...

  • CSS命名方式=》BEM

    时间:2016-11-04 20:04:53原文地址:https://github.com/zhongxia245...

  • 简单好用的CSS命名规范

    CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的...

  • CSS BEM 命名简介

    BEM是一种CSS命名规范,旨在使用严格的命名约定,使得CSS类的命名更加透明,能直接了解上下文含义。BEM分别代...

  • SCSS 基础语法

    1. 选择器扩展 1. BEM 命名法(CSS 命名) BEM 全称为 Block Element Modifi...

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • CSS命名方法之BEM

    转自BEM —— 源自Yandex的CSS 命名方法论 BEM的意思就是块(block)、元素(element)、...

  • CSS命名方法之BEM

    转自BEM —— 源自Yandex的CSS 命名方法论 BEM的意思就是块(block)、元素(element)、...

网友评论

      本文标题:如何看待CSS中BEM的命名方式?

      本文链接:https://www.haomeiwen.com/subject/eztdrftx.html