引言

人类自诞生开始，无论是凿木取火还是制造武器，都是在不断的解决问题。

所以说，人类的进步就是一个不断解决问题的过程。

BEM引入背景

因为项目的业务逻辑发生重大变化，所以原来大半年的开发周期里做的事情基本上变成无用功。但是公司的项目上线时间依旧没有改变。剩下的时间只有区区的两个月，要做的功能是有社区+电商+核心业务的网站，着实是非常的紧张。

所以为了在有限的时间里面能够完成，甚至于保质保量的完成项目的开发。正所谓非常时期，非常方法。我们必须要高效的完成设计稿到页面输出的这个过程，这时候SASS和一些模板引擎(我们使用的jade)配合自动化构建工具(gulp)就展示出了他们和传统html配合css所不同的强力肌肉了。

BEM到底有什么好的呢？

因为以前也用过sass，所以感觉有一个坑的地方就是：当dom结构比较复杂的时候，最后sass编译完成以后的css的嵌套层级非常的深。

如果按照传统的方式，为了防止css样式冲突。我们会给我们的css类名增加深层次的嵌套。所以在写sass的时候我们也按照这样的方式来写，结果就会出现如上图css文件这般的样式。这样的话样式如果需要进行查找和修改的时候就会非常的头疼。而且眼睛也很累。所以很多人都觉得重写css会比修改css要快乐得多。

所以，按照我在文章开头所说的话推而广之。技术的进步就是不断解决问题的过程。那么，问题来了：我们如何可以快乐的使用sass的特性，又可以减少层级的嵌套呢？

那就快使用BEM规范来书写类样式吧！今天就拿出来说说，希望能给大家有所裨益。

因为sass为我们引入了很多很强大的特性，例如宏(mixin)和include。这样就为了我们实现sass样式的复用提供了一条康庄大道。既然sass可以复用了，除去表现，不考虑行为，剩下结构。就是我们的html了，既然html要能复用的话，就必须要将结构进行组件化的分割。

这也是BEM的核心思想：块（block）、元素（element）、修饰符（modifier），我喜欢在这里将块称为组件。

原始的BEM的规范如下:

.block{}.block__element{}.block__element--modifier{}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：玩点不同之CSS的BEM规范

关键词：CSS