BEM 简介

BEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。 这三个不同的组成部分称为 BEM 实体。 解决的问题 当一个项目比较大的时候，容易产出样式冲突的问题。BEM 主要解决样式的冲突的问题，以此帮助你在前端开发中实现可复用的组件和代码共享。 menu { list-style: none; } .menu__item { font-weight: bold; } .menu__item--selected { color: red; } BEM 101 Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them BEM FAQ BEMIT: Taking the BEM Naming Convention a Step Further Healthchecks 这块挺有意思。

BEM 写法示例

BEM 是一种前端项目开发的方法学， 主要解决样式的冲突的问题，以此帮助你在前端开发中实现可复用的组件和代码共享。更详细的介绍见这里。 写法示例如下 <!

CSS规范--BEM入门

如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为： BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。 使用BEM我们可以获得更多的描述和更加清晰的结构，单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。 所有以上这些信息都通过它们的class名称就能明白，由此看来BEM确实非常实用。 使用BEM常见问题 1 丑极了！ 通常人们会认为BEM这种写法难看。 使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。 ，和BEM是可以互补的。

CSS @scope 如何取代 BEM

要做到这一点，首先在 Chrome 中打开一个标签页，前往 chrome://flags/，然后搜索并启用“实验性网络平台功能”标志： 什么是 BEM BEM 是一种在HTML视图中分组样式的方式，可以轻松地进行导航 BEM 试图通过围绕实际样式来构建样式名来缓解这一问题。 block 是一个包含 HTML 元素。 可以使用 @scope 替换 BEM 样式，使样式定义更小、更易于管理。 从 BEM 样式组件 WithBEMPage.tsx 开始，我们首先看到了用 BEM 方法设计的 HTML 样式： <main className="sample-page"> <h1 className @scope 与 BEM 相比的其他优势 除了将 BEM 重构为 @scope 的优势外，使用 @scope 还可以更好地控制 CSS 级联。

组件库使用BEM

bem的优势 最近在开发一个组件库，选择了BEM作为css的组织形式，主要考虑了以下三个方面的优势： 逻辑分层，容易理解。 BEM基于block、element、modify的组织形式，基本与组件的组织形式吻合。只要遵循了BEM的命名方式，对于开发和修改组件，哪些元素和状态已经存在，都可以直观的看出来。 反过来，通过html标记的BEM命名，可以直观地理解组件的功能和依赖关系。 强约束，便于团队协作。 只要定义好了大的框架和命名，那么团队其他成员基于BEM的规范进行开发，理解成本降低，而且基本不存在样式冲突的问题。 预编译器支持 目前常用的css预编译器，如sass、less、stylus，基本对BEM的支持都很好，举个例子(语法差异暂时忽略)： .block { &__element { }

关于BEM的反思

反思BEM 在“学习爱BEM”中，我要表明我对BEM语法的新感受。 我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。 当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。 BEM是如此强大之处在于重构。 当您重构项目时，您通常会在代码库的大部分内进行搜索，还有很多是跨越多文件进行搜索。 为什么BEM是如此的伟大？，就在于它提供了一个清晰的命名空间来说明自身的作用。无论是手动还是编程（即通过linters）。 结论 我认为：我们不需要用很多不必要的条件来是使BEM变的更复杂，这样会使情况变得更糟糕 每个人都有自己的编码风格，这根据你的工作不同而变化，很多BEM / ITCSS规范没有意义。 翻译自Overthinking BEM

CSS — BEM 命名规范

前言： 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论 2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。 当需要明确关联性的模块关系时，应当使用 BEM 格式。 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义： .hide { display: none ! important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。 当你选择了这种局部作用域的写法时，在较小的组件中，BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用 BEM 格式。

编写模块化CSS——BEM

在我的探索中，我发现 BEM 和 命名空间 符合我寻找的标准。 从 BEM 开始 BEM 是我的方法的基础。如果你以前从未听说过 BEM，它代表 block ， element 和 modifier。 当我第一次看见 BEM 的时候，我就很讨厌它，甚至没有给它一个机会。我不记得是什么驱使我尝试 BEM 的，但我现在深深的知道它有多么的强大。 在 BEM 中，块被写为像 class 的名字一样，如下所示： ? BEM 使用 .form 而不是 <form> 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。 有两种方法可以绕过长长的 BEM 链式命名。 你可能会说，“但这是违反 BEM 惯例的！”是的，但请阅读下一篇文章 。你会知道为什么我这样做。 接下来，还有一件事，在我的用例中添加为 BEM 添加的 —— 容器。

CSS命名法BEM与scoped、module

._3zyde4l1yATCOkgn{} BEM模式 这个是原生的命名规则，纯粹靠自我约束，BEM由块（Block）、元素（Element）、修饰符（Modifier）组成，块__元素--修饰符： B: ，如dialog E:element 对应模块中的节点，如button M:modifier 对应节点的状态，disabled 最终class名 dialog__button--disabled 使用BEM BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。 在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。

团队分享，Bem规范调研及实践

什么是 BEM 命名规范 BEM 由 Yandex 团队提出的一种前端 CSS 命名方法论。 语义化 BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。 这有悖BEM命名规范，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。 module.exports = {}; 为了让小伙伴编写符合 Bem 的规范，这里我们使用 stylelint-selector-bem-pattern 插件，它结合了插件 postcss-bem-linter 的规则，可用于校验 BEM 命名规范。

CSS架构之BEM设计模式

BEM的简介BEM就是：B代表：Block（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素 BEM全称BlockElementModifier是由Yandex（俄罗斯最著名的互联网企业）的开发团队提出的前端开发理论。 图片

[1-1.block图解]

[1-2.Element图解]

从element-ui源码来看BEM实现

以前看过一些CSS的编码规范，也照着规范编写代码，但是还是觉得自己的CSS编码风格不是很好，在平时开发中使用各个知名的组件库的时候，发现现在挺多组件库都是BEM的命名风格了，于是找了比较知名的element 饿了么前端的组件库的源码，想从看饿了么组件库的代码入手，学习学习大厂的的CSS BEM规范代码的书写风格。 BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用 接下来我要讲的就是如何利用sass，编写具有可读性和可维护性的BEM规则的css代码。 利用刚刚介绍的函数，以及块、元素、修饰符的实现代码，在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。

面试官：了解 CSS 的 BEM规范？

因为专家们的纷纷加入，于是我们有 BEM，OOCSS，SMACSS，Atomic Design 等许多选择。 什么是BEM 如果你从未接触过BEM，那么你第一次接触到BEM的时候它是长这个样子的。 .block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ } 期中的BEM分别对应 于是就引申出了BEM的modifier。 什么是修饰符 修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。 "">

使用BEM命名规范来组织CSS代码

BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长 ） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的 } /* 错误：使用了标签 */ button.search-form__button {} .search-form button {} 而在SASS文件中，也需要注意嵌套层次的意义，尽量按照 BEM 可转换成设置对应的 元素来表现，如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰，但有时候会产生代码冗余

post-csslesssass样式嵌套与命令之&符号—BEM

p,a + a,a + ul,a + li,ul + p,ul + a,ul + ul,ul + li,li + p,li + a,li + ul,li + li {  border-top: 0;}BEM BEM 不推荐在元素中嵌套其他元素。 */.block__element {}/* 修饰符用来定义块或元素的外观和行为。 同样的块在应用不同的修饰符之后，会有不同的外观 */.block--modifier {}通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免 (&) https://blog.csdn.net/lee_magnum/article/details/12950407转载本站文章《post-css/less/sass样式嵌套与命令之"&"符号—BEM

post-csslesssass样式嵌套与命令之&符号—BEM

p,a + a,a + ul,a + li,ul + p,ul + a,ul + ul,ul + li,li + p,li + a,li + ul,li + li {  border-top: 0;}BEM BEM 不推荐在元素中嵌套其他元素。 */.block__element {}/* 修饰符用来定义块或元素的外观和行为。 同样的块在应用不同的修饰符之后，会有不同的外观 */.block--modifier {}通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免 (&) https://blog.csdn.net/lee_magnum/article/details/12950407转载本站文章《post-css/less/sass样式嵌套与命令之"&"符号—BEM

CSS命名规范之BEM-源自Yandex的CSS命名方法论

BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。 BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。 我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。 使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下：

这些 CSS 命名规范将省下你大把调试时间（文末有福利）

有些团队使用的是连字符分隔（hyphen delimiters）法，还有一些倾向于使用一种叫 BEM 的命名法，这种方法更加有条理。 向 5 岁小孩解释 BEM 规范 BEM 规范试图将整个用户界面分解成一个个小的可重复使用的组件。 如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。 如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。 这就是 BEM 的基本用法。 个人来说，我在小项目中一般只用连字符分割法来写类名，在用户界面更复杂的项目中使用 BEM 方法。 为何要使用命名规范？

比较脑磁图与高密度脑电图的内在功能连通性

考虑到神经磁信号对头部电导率不准确的相对稳健性，我们使用单层边界元法(BEM)对该源空间进行MEG正演建模。另一方面，我们考虑了两种不同的头皮脑电图正向模型:(1)三层BEM(BEM3)。 MEG和EEG-FEM5之间存在典型的前后相互作用，两者的图相似，而与EEG-BEM3不相似，而BEM3以额叶rsFC为主，导致图不相同，使用FEM5代替BEM3时，MEG-EEG相似性显著增加。 交叉通道空间相似性(浅灰色:MEG vs EEG-BEM3，深灰色:MEG vs EEG-FEM5，黑色:EEG-BEM3 vs EEGFEM5)。 在α波段(图6)，与EEG-BEM3相比，我们识别的EEG-FEM5状态更少，三个EEG-BEM3状态混合为两个EEG-FEM5状态。 相反，在β波段(图7)，EEG-FEM5的状态比EEG-BEM3的状态更多，两个EEG-FEM5状态混合成一个EEG-BEM3状态。

29、地址列表

（2）这里我们说另一种更好方法 我们去vant官网定制主题中可以看到，官网是这样说的： Vant提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。 那么，什么是BEM？ 其实这个我理解的也不是很透彻，不过大概就是一种设计思想，将css的命名进行了规范，然后就是抽离了css样式文件，一个样式对应一个html块，我这里丢两篇文章，大家可以看看： CSS BEM 书写规范 如何看待 CSS 中 BEM 的命名方式？ 参考学习 有赞Vant组件库的引入 AddressList地址列表 CSS BEM 书写规范 如何看待 CSS 中 BEM 的命名方式？