这段时间在整理前端部分的代码规范。上面提到的CSS规范都会涉及到选择器的命名。请参考BEM命名规范。内容整理如下，供大家参考。请正确！有兴趣的可以移步CSS编码规范。BEM是Yandex推出的一套CSS命名规范。官方对它的描述是这样的：BEM是一种可以让你快速开发网站并维护多年的技术。一开始，Yandex推出的BEM包含了规范及其配套的构建工具。今天说的BEM，主要是指规范。在最新的BEM推广页面中是这样描述的：BEM是一种可以帮助你在前端开发中实现组件复用和代码共享的命名方式。BEM解决的问题css的样式应用是全局的，完全没有作用域。考虑以下场景：场景一：开发一个弹窗组件，在现有页面上测试是可以的。一段时间后，需要一个新的页面。当页面打开弹窗组件时，页面的样式发生变化。查看了一下问题，原来是弹窗组件和页面的样式重叠了，接下来就是修改叠加样式的选择器了。。。又过了一段时间开发一个新页面，每次我命名该元素时，我都被吓坏了。写一个样式，按几次F5，测试每个组件...场景二：继上面，因为页面和弹窗样式冲突，所以在页面的冲突样式选择器中添加一些结构逻辑，比如子选择器、标签选择器，使选择器独一无二。过了一段时间，新同事接手跟进需求，修改样式。由于选择器是一系列的结构逻辑，理解起来比较麻烦，所以他干脆在样式文件的末尾使用了另一套选择器，并加了一个override样式。...然后又有了新的需求...最后的结果是一个元素对应多套样式，分布在整个样式文件中...以前开发组件的时候，我们用“概率duplicationissmall”或者干脆”在那个时候保证样式不与“认为唯一的名称”冲突是不可靠的。理想情况下，在开发一组组件的过程中，我们应该能够任意命名元素而不用担心关于是否和组件外的样式冲突，BEM解决这个问题的思路是，在项目开发中，每个组件都是唯一的，它的名字也是唯一的，组件内部元素的名字加上组件name，元素的名字作为选择器，组件内部的样式不会和组件外部的样式冲突，这是通过组件的唯一性来保证选择器的唯一性name，从而保证样式不会被组件外污染。BEM意为块（block）、元素（element）、修饰符（modifier），是Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法使您的CSS类对其他开发人员更加透明和有意义。BEM命名约定更严格并且包含更多信息，它们被团队用于开发大型、耗时的项目。命名约定的模式如下：.block{}.block__element{}.block--修饰符{}.block表示更高级别的抽象或组件。.block__element代表.block的后代，用于整体组成一个完整的.block。.block——修饰符代表.block的不同状态或不同版本。BEM的全部意义在于，名称本身就可以告诉其他开发人员标签的用途。通过浏览HTML代码中的class属性，您可以了解模块是如何关联的：有些只是组件，有些是这些组件的后代或元素，还有一些是组件符号的其他形式或装饰。让我们用一个类比/模型来思考以下元素是如何相关的：.person{}.person__hand{}.person--female{}.person--female__hand{}.person__hand--left{}人，其中有手等元素。一个人也有其他的形式，比如女人，这又是有自己的要素的。下面我们把它们写成“常规”的CSS：失去联系。以.female为例，它是指女性人类还是某种雌性动物？.hand，它是指时钟的指针吗？还是手打牌？使用BEM我们可以获得更多的描述和更清晰的结构，并且我们可以通过在代码中命名来了解元素之间的关系。BEM真的很强大。让我们看一个以“常规”方式命名的.site-search示例：
