简介
bemor-latest-github 是一种基于 BEM (Block-Element-Modifier) 的 CSS 命名规范，可以帮助开发者维护 CSS 样式的可读性、可维护性和可扩展性。它的最新版本可以通过 npm 安装，并且支持在 Github 上进行开发和贡献。
安装
建议在项目中使用 npm 来安装 bemor-latest-github。
npm install bemor-latest-github --save-dev
基本使用
1. 在 HTML 中应用 BEM
使用 bemor-latest-github，可以将 HTML 元素分为三部分：Block、Element 和 Modifier。示例代码如下：
<div class="block">
<div class="block__element">
<div class="block__element--modifier"></div>
</div>
</div>在这个示例中，“block” 是 Block 名称，“element” 是 Element 名称，“modifier” 是 Modifier 名称。Block 和 Element 之间使用双下划线连接，而 Modifier 在 Block 或 Element 后面使用双减号连接。
2. 在 CSS 中应用 BEM
使用 bemor-latest-github，可以将 CSS 样式分为两部分：Base 和 Theme。示例代码如下：
-- -------------------- ---- ------- -- ---- -- ------ - -------- ------ - --------------- - -------- ------------- - -- ----- -- ----- - -------------- ----- ---------------- ----- - ------ - ----------------- ------------------- - --------------- - ------ --------------------- -
在这个示例中，“Base” 是 Block 的基本样式，即没有 Modifier 的样式。而 “Theme” 是 Block 的主题样式，即不同的 Modifier 对应着不同的主题样式。在这个示例中，Modifier 为空，因此只需要设置 Base 样式。而如果有不同的 Modifier，只需要根据不同的 Modifier 来设置 Theme 样式即可。
高级使用
1. 嵌套
在 bemor-latest-github 中，可以使用嵌套来描述 Block、Element 和 Modifier。示例代码如下：
.block {
&__element {
&--modifier {
display: none;
}
}
}在这个示例中，“&” 表示当前选择器的上一级选择器，“&__element” 表示当前选择器的上一级选择器是 Block，并且当前选择器是 Element，“&--modifier” 表示当前选择器的上一级选择器是 Element，并且当前选择器是 Modifier。
2. 继承
bemor-latest-github 支持继承样式，通过引入 Mixin 的方式来实现。示例代码如下：
.block {
background: #ddd;
&__element {
@include transition();
}
}在这个示例中，“transition()” 是 Mixin 的示例，用于设置 CSS transition 属性。在 Element 中使用 Mixin，可以继承 Block 的样式。
3. 变量
bemor-latest-github 支持变量，通过定义变量来解决重复的 CSS 样式。示例代码如下：
$block-color: #333;
.block {
background: $block-color;
&__element {
background: $block-color;
}
}在这个示例中，通过定义变量 "$block-color" 来解决重复的 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f1f