为什么使用这几年的web应用开发可谓疯狂。依靠浏览器的支持和前端技术和框架的发展，很多应用已经把很多逻辑从服务器端迁移到浏览器端，采用前后端分离技术，并且浏览器端与用户进行交互，完成复杂的逻辑。由于这种发展趋势，Web应用前端代码的复杂度大大增加，尤其是JavaScript和CSS代码的数量大幅增加。面对空前庞大的CSS和JS代码，形成科学的代码组织方式和命名规范迫在眉睫。一个好的命名规则应该满足以下优点：安全命名，不干扰其他css我需要快速知道一个类在这个伟大的项目中的位置类应该尽可能少，结构应该清晰，不要嵌套太深，否则会形成一种难以维护的“神秘”风格BEMBEM是Yandex提出的一种前端项目开发的方法论。BEM的名字来源于该方法论的三个组成部分的英文首字母，分别是Block、Element和Modifier。这三个不同的组件称为BEM实体。块-块在Web应用程序开发中通常称为组件或模块。每个块在逻辑上和功能上都相互独立。块封装了与组件相关的JavaScript、CSS代码和HTML模板。由于块是独立的，所以在应用开发中可以重复使用，从而减少代码重复，提高开发效率。块可以放置在页面上的任何位置，并且可以相互嵌套。元素-元素元素是块中的组件。不能在块外使用元素。BEM不建议在其他元素中嵌套元素。Modifier-Modifier修饰符用于定义块或元素的外观和行为。同一个方块在应用不同的修改器后会有不同的外观。//简单的说。块{/*样式*/}。block__element{/*styles*/}.block--modifier{/*styles*/}如何以BEM命名方式为例？请先看下面的例子：//我们要为这个菜单写样式MenuItem1MenuItem2菜单项31.“祖传”命名放在前面，我们可以这样写：MenuItem1MenuItem2MenuItem3看看，还是那么清爽。但是小伙伴们有没有注意到一个问题：从命名的角度来看，子元素item与其父元素菜单的关系似乎过于松散了。一个box也可以有一个item子类，一个xxx也可以包含一个item子类。看看它的样式是怎么写的：//sass.nav{list-style:none;.item{字体粗细：粗体；&.selected{颜色：红色；}}}//编译后生成的css.nav{list-style:none;}.nav.item{font-weight:bold;}.nav.item.selected{color:red;}从style文件看来那没什么大问题，但这是在我们的代码层数较少的情况下。如果是复杂的页面元素，我们的sass层次会很深。编译后的css也会有很深的层级。2.BEM命名下面我们再用BEM来写：MenuItem1MenuItem2菜单项3//sass.nav{list-style:none;&__item{字体粗细：粗体；&--selected{颜色：红色；}}}//用sass编译的css是.nav{//menulist-style:none;}.nav__item{//menuitemfont-weight:bold;}.nav__item--selected{//选中的菜单项color:red;}乍一看，按照BEM命名规则生成的CSS类名会很复杂，但其实熟悉了命名规则后，就很容易理解它们的含义了。其次，css不再有复杂的层级关系。浏览器渲染时，样式系统从最右边的选择器开始，向左边执行匹配规则。只要当前选择器左边还有其他选择器，样式系统就会继续向左移动，直到找到符合规则的元素，或者因为不匹配而退出。降低层级可以提升性能，相应的静态css文件大小也会增加reduce。很多人会抱怨两个下划线和两个破折号作为连接符，不优雅。但是我觉得BEM是一种思维，我们需要去理解。至于我们用什么样的连接器，用什么样的方法，我们可以根据自己项目的情况来考虑。
