BEM是Block、Element、Modifier的缩写。 它是俄罗斯Yandex团队提出的组件化CSS命名方法和规范。 使用BEM的主要目的是将用户界面划分为独立的块，使开发更简单、更快捷，有利于团队协作，并且方便维护。
为什么选择边界元法
很多新手在开始写网页的时候，对于命名可能会比较随意。 然而游戏开发素材人物立绘，在一个正式的项目中，会有很多开发人员同时开发。 如果每个开发者都使用自己的一套命名方式，这就会导致命名的识别性和一致性成为一个大问题，同时也会引发命名问题。 污染。 这时使用BEM命名方法就可以很好的解决这个问题。
当然，使用 BEM 还有许多其他好处。 例如，每个块都是独立的，因此不会出现堆叠带来的问题。 而且这些块可以多次重复使用，这可以减少必须维护的 CSS 代码量。
BEM命名规则
命名约定模式如下：
.block{}
.block__element{}
.block--modifier{}
.block__element{}--modifier{}其中，block代表更高层次的抽象或组件，block__element代表.block的后代，用于整体构成一个完整的块，block--modifier代表块的不同状态或不同版本。 使用两个连字符和下划线可以定义可以用单个连字符分隔的块。
堵塞
Block是功能独立的页面组件，可以重复使用，并且支持嵌套。 我们平时浏览的网页都是由“块”组成的。
每个块的块名称必须是唯一的，并清楚地表明它描述的是哪个块。 例如，如果某个块的名称是head，那么我们可以从这个块名称推断出这应该是一个header块，位于网页的头部。
使用块时，块不应影响其环境，即不应设置块的外部几何形状或位置。 需要注意的是，块应该是独立的。 当页面上添加、删除或移动块时，不需要修改该块。
例子：
下面有三个块，分别是顶部、搜索表单和底部。 块可以嵌套：
<div class="top">
<form class="search-form">搜索form>
div>
<div class="bottom">底部div>在实际应用中，我们需要保证每个块是独立的。 例如，如果我们将顶部块中的搜索表单块移至底部块，如果要保证整体不会杂乱，则搜索表单块的CSS必须是独立的。 如果我们编写CSS，直接将search-form块嵌套在top块下面是不好的：
/*错误写法*/
.top .search-form{...} /*表示只有在top块内的search-form块才会应用此CSS样式*/
.bottom{}在这种情况下，如果我们以后将search-form块移动（或重用）到HTML代码中的底部块，页面样式肯定会混乱，这会增加我们的工作量。 我们应该从一开始就考虑到后续可能出现的情况，所以我们不会这样写CSS。
正确的写法如下：
/*正确写法*/
.top{...}
.bottom{}
.search-form{...}元素
元素是块的组成部分并且依赖于上下文。 元素的名称描述了它是什么，而不是它的状态。 元素只有位于其所属的块内时才能执行其功能。
元素可以相互嵌套，并且元素始终是模块的一部分，而不是另一个元素的一部分，这意味着元素的名称不能在像 block__elem1__elem2 这样的层次结构中定义。
例子：
<div class="top">
--top块中的search-for块-->
<form class="search-form">
--在search-form块中的input元素-->
<input class="search-form__input">
--在search-form块中的button元素-->
<button class="search-form__button">搜索按钮button>
form>
div>这时候我们编写CSS代码的时候，可以将search-form__input和search-form__button放在search-form块中。
.search-form .search-form__input{...}
.search-form .search-form__button{...}修饰符
修改器可以与块和元素一起使用。 我们经常需要对已经定义好的块或元素进行一些小的调整，以满足特定的小功能。 通常外观或行为会有轻微的变化，可以使用修饰符来处理。 注意修饰符不能单独使用，必须绑定到对应的块或元素上，不能混合搭配。
为什么修饰符必须包含块名称或元素名称？
例子：
例如，当我们添加多个按钮时，一个红色按钮，一个绿色按钮，一个蓝色按钮，一个黄色按钮：
CSS 代码如下所示：
.banner__btn--red { background-color: red; }
.banner__btn--green { background-color: green; }
.banner__btn--blue { background-color: blue; }
.banner__btn--yellow { background-color: yellow; }何时使用边界元法
当我们使用BEM方法命名时，我们需要知道哪些东西应该使用BEM格式。 因为不是每个地方都应该使用BEM命名方式，所以只有在需要明确模块之间的关系时才需要使用BEM格式。
例如，只有一个公共样式，例如定义字体大小：
.f16{
font-size:16px;
}
.f18{
font-size:18px;
}使用混合分割样式
在 BEM 中，位置和布局样式是通过父块设置的。 这需要通过混合块和元素而不耦合代码来组合多个实体（块、元素和修饰符称为BEM实体）的性能和风格。
例子：
-- top 块 -->
<div class="top">
-- search-form块混合top块的search-form元素 -->
<form class="search-form top__search-form">搜索form>
div>这样，通过混合将位置风格与块分离。 您可以在.top__search-form中设置表单的位置或浮动样式，保持search-form块的样式独立并解耦其完整的样式代码。 。 在传统的命名方式中，我们经常通过嵌套来调整局部样式，例如.top .search-form。 但这样做会改变选择器的权重。 在 BEM 思维中，保持选择器扁平且重量轻是一个指导原则。
因此，在使用BEM命名时，需要特别注意它的工作原理：
适当时使用嵌套选择器
这是否意味着当我们使用BEM命名方法时，我们不能嵌套选择器？ 不完全是这样。 BEM只是建议保持嵌套级别尽可能低，因为很多人没有很好地处理CSS的权重问题，这最终可能会导致无休止的嵌套或无意义的嵌套以及!important为了增加权重。 这无疑增加了代码耦合度。
您可能想问，什么时候应该使用嵌套？ 当需要通过块状态调整内部元素时，使用嵌套就非常适合。
例子：
.search-form .search-form__input{}
.nav_content_dark .nav_item{}开闭原则
开放封闭原则是所有面向对象原则的核心，这意味着软件实体应该是可扩展的但不可修改的。 也就是说游戏ui命名规范，它对扩展开放，但对修改关闭。 如果这个原则应用到BEM的使用上，就意味着我们应该使用修饰符来扩展块或元素的样式，而不是修改块或元素的基本样式。
例子：
例如有两个按钮游戏ui命名规范，如下图所示：
<div>
<button class="btn">正确button>
<button class="btn">错误button>
div>
.btn{
font-size:16px;
color:white;
border:none;
padding:10px 8px;
display: inline-block;
background-color:green;
}如果我们想把名字错误的按钮的背景色改为红色，我们需要在.btn中添加修饰符，而不是直接修改.btn的样式：
<div>
<button class="btn">正确button>
<button class="btn btn--error">错误button>
div>
.btn{
font-size:16px;
color:white;
border:none;
padding:10px 8px;
display: inline-block;
background-color:green;
}
.btn--error{
background-color:red;
}
