BEM在前端领域到底是什么？为什么我们需要它们？末尾明确指出CSSModules不需要BEM，那么BEM到底是什么？接下来，我将翻译BEM官网的教程，带大家搞清楚什么是前端领域的BEM。BEM-BlockElementModfier（块元素编辑器）是一种非常有用的方法，可以帮助您创建可重用的前端组件和前端代码。它具有以下三个特点：易用性如果你想使用BEM，你只需要采用BEM命名约定为单元独立的块和CSS选择器，这可以使你的代码可重用和单元灵活性。使用BEM后，可以按照您喜欢的方式组织和配置方法和工具。下面将从3开始BEM到底是什么？BEM是一种高可用、强大、简单的命名约定，可以让你的前端代码更易读易懂，易于与他人协作，易于扩展，更强大更清晰，关键更严谨。命名BEM方法可确保参与网站开发的每个人都可以使用同一个代码库并使用同一种语言。使用BEM格式的命名约定，可以从容应对需求的变化。为什么FAQ不应用语义标签，而是直接对块元素使用CSS类？我可以在同一个选择器中组合标签和类，比如button.button吗？如果还有更多疑惑，可以查看FAQ列表！在小型手册站点上，如何组织您的样式通常不是大问题。你进去，写一些CSS，或者甚至一些SASS。使用SASS生产设置将其编译成样式表，然后聚合它，将模块中的所有样式表变成一个漂亮整洁的包。但是当涉及到更大、更复杂的项目时，你组织代码的方式至少在三个方面是生产力的关键：它会影响编写代码需要多长时间、你需要编写多少代码以及你的浏览器不会work不做太多加载。当您与团队合作并且高绩效必不可少时，这一点变得更加重要。对于使用遗留代码的长期项目也是如此（请参阅“如何使用Sass和SMACSS扩展和维护遗留CSS”——SMACSS和BEM的一些不错的组合）。方法目前有很多方法可以减少CSS占用空间、组织程序员之间的协作以及维护大型CSS代码库。这在Twitter、Facebook和Github等大型项目中很明显，但其他项目往往很快就会发展到“巨大的CSS文件”状态。OOCSS使用CSS“对象”分隔容器和内容SMACSS样式指南为您的CSS编写CSS规则的五类SUITCSS结构化类名和有意义的连字符更好吗？无论您选择在项目中使用哪种方法，您都将受益于更加结构化的CSS和UI的优势。有些风格不那么死板，更灵活，而另一些则更容易理解和适应团队。我选择BEM而不是其他方法的原因归结为：它比其他方法（即SMACSS）更容易混淆，但仍然为我们提供了我们想要的良好架构（即OOCSS）和可识别的术语。MarkMcDonnell，BEM可维护的CSSBlocks、Element和Modifier听到BEM是该方法的关键元素-Block、Element和Modifier的首字母缩写词，您不会感到惊讶。BEM的严格命名可以在这里找到。块是一个独立的实体，它本身是有意义的。示例标题、容器、菜单、复选框、输入元素是块的一部分，没有独立的含义，并且在语义上与其块相关。示例菜单项、列表项、复选框标题、标题标题修改块或元素上的徽标。使用它们来改变外观或行为。例子Disabled,highlighted,checked,fixed,sizebig,coloryellow深入理解下面我们来看一个使用BEM的元素，就是Github的按钮：我们可以用一个普通的按钮来处理普通的情况，然后使用两种不同的应对不同的情况。因为我们使用BEM方法将类绑定到Block，所以我们可以使用任何我们想要实现的标签。（按钮，a甚至div）。但是命名规则告诉我们，我们需要使用block-modifier-value语法。HTML:
