BEM分析BEM是一套CSS国际命名规范。这是一个非常有用的强大而简单的命名约定。它可以使前端代码更具可读性，易于理解和易于扩展。BEM是块、元素和修饰符的首字母缩写词。B:Block是一个块，一个独立的组件，将所有的东西都分成一个组件E:Element是一个块中的子节点。为了表示一个子节点属于哪个块，写成block__elementM:Modifier声明了某个节点的修改状态。我们用一个搜索框来简单说明上面三个东西的用法：这个搜索框可以看成一个块Block，它由两个子节点组成，一个是输入区input，一个是查询按钮button。对于这个块的命名，根据BEM规则，我们可以这样写：将整体搜索框site-search命名为模块，在模块下的两个子节点添加两个下划线，添加自己的名字input和button，这种命名方式，即使我们看不到网页内容，只看CSS样式名称，我们仍然可以感受到页面结构和页面元素之间的关系。如果我们要说明button按钮是灰色的，我们还可以加上一个修饰类名的修饰符，比如可以是site-search__button--gray。上图说明一个元素是可以模块化的，它可以包含多个元素。这样的命名约定可以更好地说明元素之间的关系。为什么使用BEM命名你是否曾在编写CSS样式名称时摸不着头脑？你是否曾在团队合作时看不到别人的代码，只能无奈地说“重写这个CSS比修改旧文件更快”？BEM命名规则给我们带来了以下便利：BEM命名规则为我们提供了一个很好的模板，可以体现元素之间的命名关系，CSS命名更语义化，元素更容易理解。而且独特的命名方式使得代码能够更好的复用，所以在写样式名的时候不用再小心翼翼，生怕和上下文中的样式名重名，导致样式要覆盖的元素组件。刚接触BEM命名方式的人可能会觉得一个元素的类名又长又丑，但是这种冗长的命名方式大大降低了类名重复的可能性。BEM官网表示，这种命名约定最关键的特点是：BEM的关键特点是块的独立性。正如CSS推荐的那样，您可以在网页的任何位置放置一个块，并确保它不受周围环境的影响。而且，如果您最近需要在当前块中嵌套另一个块，则可以保证它们的完全兼容性。换句话说，在维护Web应用程序时，您可以在页面周围移动块、添加其他项目并将它们组合起来。看看Taopiaopiao的界面Taopiaopiao的界面写的很漂亮，但是最近看了一下Taopiaopiao的CSS命名方式，觉得略显不妥。例如，工单顶部的索引栏。以下是淘票票对顶部导航栏的CSS命名。为了让大家更好的看到页面结构，我对页面元素进行了简单的处理，并添加了几行注释：
