# @bem/sdk\.naming\.presets 中文文档

规范地址：https://npmcn.com/package/%40bem/sdk.naming.presets/

版本：0\.2\.3
npm 元数据更新时间：2022-04-04T18:21:01.507Z
中文译文更新时间：2026-11-07T21:47:19.785Z
软件包许可：MPL-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bem/sdk.naming.presets
原文对照：https://npmcn.com/package/%40bem/sdk.naming.presets/?lang=original
项目主页：https://github.com/bem/bem-sdk/tree/master/packages/naming.presets#readme
源码仓库：https://github.com/bem/bem-sdk

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：42.1 kB，12 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>= 8\.0
- 运行依赖：0 个
- 首次发布：2017-09-30T09:44:10.956Z
- 最新版本发布：2019-02-03T14:49:21.765Z
- 近 30 天下载量：2604（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 0 个）

## 中文简介

命名预设

## 安装

```sh
npm install @bem/sdk.naming.presets
```

也可以使用：`pnpm add @bem/sdk.naming.presets`、`yarn add @bem/sdk.naming.presets`、`bun add @bem/sdk.naming.presets`

## README

# 预设

包中包含默认命名公约的预设和创建自定义命名公约的工具.

[![NPM Status](https://img.shields.io/npm/v/@bem/sdk.naming.presets.svg)](https://www.npmjs.org/package/@bem/sdk.naming.presets)

-   [导言](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-introduction)
-   [尝试预设](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-try-presets)
-   [快开始](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-quick-start)
-   [API 参考](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-api-reference)
-   [参数调制](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-parameter-tuning)
    -   [获取默认预设](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-get-the-default-preset)
    -   [使用另一个预设作为默认](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-use-another-preset-as-default)
    -   [通过带有默认选项的对象](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-pass-an-object-with-default-options)
-   [命名公约](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-naming-conventions)

## 导言

您可以使用此软件包 :

-   导入已有预设 [命名公约](https://bem.info/methodology/naming-convention/)。 。 。 .
-   创建带有自定义命名惯例的预设 .

当您想要根据另一个预设创建一个新的预设时,这个包是有用的,例如,只修改修改器的分隔符,并保持其他选项不变.

> **说明.** 如果您没有可用的 BEM 工程来测试 `@bem/sdk.naming.presets` 软件包,最快速创建的方法是使用 [贝姆表达式](https://github.com/bem/bem-express)。 。 。 .

## 尝试预设

实例可见于 [RunKit 编辑器](https://runkit.com/migs911/how-bem-sdk-naming-presets-works)。 。 。 .

## 快开始

> **请注意.** 用于 `@bem/sdk.naming.presets`,必须安装 [节点.js 8.0+](https://nodejs.org/en/download/)。 。 。 .

在这个快速的起步中,您将学会如何导入带有命名公约的预设,并创建带有自定义命名公约的预设.

要运行 `@bem/sdk.naming.presets` 软件包 :

1.  [安装 `@bem/sdk.naming.presets` 软件包](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-installing-the-bemsdknamingpresets-package)。 。 。 .
2.  [导入带有命名公约的预设](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-importing-a-preset-with-a-naming-convention)。 。 。 .
3.  [创建带有自定义命名公约的预设](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-creating-a-preset-with-a-custom-naming-convention)。 。 。 .

### 安装 `@bem/sdk.naming.presets` 软件包

安装 `@bem/sdk.naming.presets` 软件包,运行以下命令:

```
$ npm install --save @bem/sdk.naming.presets
```

### 导入带有命名公约的预设

要导入带有默认命名常规的预设, 请创建 JavaScript 文件, 并附带任何名称( 例如 , **应用程序.js**并插入以下内容:

```js
const originNaming = require('@bem/sdk.naming.presets/origin');
```

这个代码与原产地命名惯例一起导入了预设. 要导入另一个预设, 更改 `origin` 到预设名称.

**实例:**

```js
const legacyNaming = require('@bem/sdk.naming.presets/legacy');
const originReactNaming = require('@bem/sdk.naming.presets/origin-react');
const reactNaming = require('@bem/sdk.naming.presets/react');
const twoDashesNaming = require('@bem/sdk.naming.presets/two-dashes');
```

[RunKit 活实例](https://runkit.com/migs911/different-presets-from-bem-sdk-naming-presets-package)。 。 。 .

在您导入了预设后,您可以将其用于自己的目的,例如创建一个 `parse()` 函数从 [@bem/sdk. naming.entity.parse (英语)](https://github.com/bem/bem-sdk/tree/master/packages/naming.entity.parse) 软件包.

**示例**

```js
const originNaming = require('@bem/sdk.naming.presets/origin');
const parse = require('@bem/sdk.naming.entity.parse')(originNaming);

// Parse a block name.
parse('my-block');

// Parse an element name.
parse('my-block__my-element');

// Parse a block modifier name.
parse('my-block_my-modifier');

// Parse a block modifier name with a value.
parse('my-block_my-modifier_some-value');

// Parse an element modifier name.
parse('my-block__my-element_my-modifier');

// Parse an element modifier name with a value.
parse('my-block__my-element_my-modifier_some-value');
```

[RunKit 活实例](https://runkit.com/migs911/parse-a-string-using-origin-naming-convention)。 。 。 .

### 创建带有自定义命名公约的预设

要创建带有自定义命名公约的预设,请使用 [创建](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-create) 函数。 在参数中,传递您要在默认命名惯例中覆盖的选项。 例如,可以定义修饰器的值被等号所划定(`=`) (中文(简体) ).

**示例**

```js
const myNamingOptions = {
    delims: {
        mod: { val: '=' }
    }
};
const myNaming = require('@bem/sdk.naming.presets/create')(myNamingOptions);

// Parse a BEM entity name to test the created preset.
const parse = require('@bem/sdk.naming.entity.parse')(myNaming);
parse('my-block_my-modifier=some-value');
/**
 * => BemEntityName {
 * block: 'my-block',
 * mod: { name: 'my-modifier', val: 'some-value' } }
 */
```

[RunKit 活实例](https://runkit.com/migs911/create-preset-with-a-custom-naming-convention)。 。 。 .

## API 参考

#### 创建()

创建指定命名公约的预设.

此函数将从默认的预设中获得所有选项, 以所通过选项覆盖它们并返回结果 。 选项按以下顺序覆盖:

1.  默认预设的选项 .
2.  来自 `userDefaults` 参数.
3.  来自 `options` 参数.

```js
/**
 * @typedef INamingConventionDelims
 * @property {string} elem — Separates an element name from block.
 * @property {string|Object} mod — Separates a modifier name and the value of a modifier.
 * @property {string} mod.name — Separates a modifier name from a block or an element.
 * @property {string|boolean} mod.val — Separates the value of a modifier from the modifier name.
 */

/**
 * Returns created preset with the specified naming convention.
 *
 * @param {(Object|string)} [options] — User options or the name of the preset to return.
 *                                      If not specified, the default preset will be returned.
 * @param {string} [options.preset] — Preset name that should be used as the default preset.
 * @param {Object} [options.delims] — Strings to separate names of bem entities.
 *                                    This object has the same structure as `INamingConventionDelims`,
 *                                    but all properties inside are optional.
 * @param {Object} [options.fs] — User options to separate names of files with bem entities.
 * @param {Object} [options.fs.delims] — Strings to separate names of files in a BEM project.
 *                                       This object has the same structure as `INamingConventionDelims`,
 *                                       but all properties inside are optional.
 * @param {string} [options.fs.pattern] — Pattern that describes the file structure of a BEM project.s
 * @param {string} [options.fs.scheme] — Schema name that describes the file structure of one BEM entity.
 * @param {string} [options.wordPattern] — A regular expression that will be used to match an entity name.
 * @param {(Object|string)} [userDefaults] — User default options or the name of the preset to use.
 *                                           If the name of the preset is incorrect, the `origin` preset will be used.
 * @returns {INamingConvention} — An object with `delims`, `fs` and `wordPattern` properties
 *                                that describes the naming convention.
 */
create(options, userDefaults);
```

## 参数调制

### 获取默认预设

你可以用这个 `create()` 函数以获得此软件包的默认预设。 打电话 `create()` 无参数的函数.

```js
const defaultPreset = require('@bem/sdk.naming.presets/create')();

// Check that the origin preset is default.
const originPreset = require('@bem/sdk.naming.presets/origin');
if (defaultPreset === originPreset) {
    console.log('Origin is the default preset now.');
}
```

[RunKit 活实例](https://runkit.com/migs911/get-the-default-preset)。 。 。 .

### 使用另一个预设作为默认

默认预设是 `origin`,但可以在 `options.preset` 参数.

**示例**

```js
const myNamingOptions = {
    preset: 'two-dashes',
    delims: {
        mod: { val: '=' }
    }
};
const myNaming = require('@bem/sdk.naming.presets/create')(myNamingOptions);

// Parse a BEM entity name to test the created preset.
const parse = require('@bem/sdk.naming.entity.parse')(myNaming);
parse('my-block--my-modifier=some-value');
/**
 * => BemEntityName {
 *   block: 'my-block',
 *   mod: { name: 'my-modifier', val: 'some-value' } }
 */
```

[RunKit 活实例](https://runkit.com/migs911/use-another-preset-as-default-via-presets-option)。 。 。 .

您可以在 `userDefaults` 参数。 要使用这种方法,请通过第二个参数中预设的名称.

**示例**

```js
const myNamingOptions = {
    delims: {
        mod: { val: '=' }
    }
};
const myNaming = require('@bem/sdk.naming.presets/create')(myNamingOptions, 'two-dashes');

// Parse a BEM entity name to test the created preset.
const parse = require('@bem/sdk.naming.entity.parse')(myNaming);
parse('my-block--my-modifier=some-value');
/**
 * => BemEntityName {
 *   block: 'my-block',
 *   mod: { name: 'my-modifier', val: 'some-value' } }
 */
```

[RunKit 活实例](https://runkit.com/migs911/use-another-preset-as-default-via-userdefaults-option)。 。 。 .

如果你通过一个预设名称 `userDefaults` 参数,它将完全覆盖默认的预设. 例如,所有这些行返回 `two-dashes` 预设 :

```js
const createPreset = require('@bem/sdk.naming.presets/create');
const twoDashesPreset1 = createPreset({ preset:'legacy' }, 'two-dashes');
const twoDashesPreset2 = createPreset({}, 'two-dashes');
const twoDashesPreset3 = require('@bem/sdk.naming.presets/two-dashes');
```

### 通过带有默认选项的对象

您可以通过一个带有默认选项的对象来在 `userDefaults` 级别。 在第二个参数中传递此对象 `create()` 函数.

**示例**

```js
const userDefaults = {
    fs: {
        delims: {
            elem: '__',
            mod: '_'
        },
        scheme: 'flat'
    }
}

// Use well-known presets with the flat scheme.
const reactFlatPreset = require('@bem/sdk.naming.presets/create')({ preset: 'react' }, userDefaults);
const twoDashesFlatPreset = require('@bem/sdk.naming.presets/create')({ preset: 'two-dashes' }, userDefaults);

// Create a custom preset with the flat scheme.
const customPreset = require('@bem/sdk.naming.presets/create')({ wordPattern: '[a-z]+' }, userDefaults);

// Create preset with overwritten delimiters.
const presetOptions = {
    delims: {
        mod: { val: '='}
    },
    fs: {
        delims: {
            mod: { val: '='}
        }
    }
}
const anotherPreset = require('@bem/sdk.naming.presets/create')(presetOptions, userDefaults);
```

[RunKit 活实例](https://runkit.com/migs911/use-an-object-with-default-options-to-create-preset-with)。 。 。 .

## 命名公约

命名公约的主要思想是,将地名命名为: [BEM 实体](https://en.bem.info/methodology/key-concepts/#bem-entity) 尽可能地说明清楚.

本套件包含下列带有命名惯例的预设:

-   [来源](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin) ——默认命名公约.
-   [遗产](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-legacy) ——与起源命名公约类似,但文件结构组织不同.
-   [来源反应](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin-react) ——原产地混合和反应命名公约.
-   [反应](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-react) ——以反应风格命名大会.
-   [两发子弹](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-two-dashes) ——根据这一命名公约,修饰者被两个连字符所划分(`--`) (中文(简体) ).

此外,还可以发明自己的命名会. 要学会怎么做,看 [自定义命名公约](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-custom-naming-convention)。 。 。 .

### 来源

BEM方法为创建命名规则提供了一个想法,并在其犬类命名公约中落实了这个想法: [来源命名公约](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin-naming-convention)。 。 。 .

**单词图案 :**

每个名称必须匹配正则表达式: `[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*`。 。 。 .

**实例:** `my-element`, (中文(简体) ), `myElement`, (中文(简体) ), `element1`, (中文(简体) ), `2element`。 。 。 .

**参数 :**

要件以两个下划线划分(`__`),而修饰者的修饰和价值则用一个下划线来划分(`_`) (中文(简体) ).

示例 `my-block__my-element_my-modifier_some-value`。 。 。 .

**文件结构 :**

-   BEM 实体结构方案: `nested`。 。 。 .
-   项目结构模式: `${layer?${layer}.}blocks/${entity}.${tech}`。 。 。 .

**实例:**

```
blocks/my-block.js
blocks/my-block/_my-modifier.js
blocks/my-block/__my-element.js
blocks/my-block/__my-element/_my-modifier_some-value.css
layer.blocks/my-block/__my-element/_my-modifier_some-value.css
```

### 遗产

此预设基于 [来源](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin) 预设但提供了另一个项目结构模式.

**单词图案 :**

每个名称必须匹配正则表达式: `[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*`。 。 。 .

**实例:** `my-element`, (中文(简体) ), `myElement`, (中文(简体) ), `element1`, (中文(简体) ), `2element`。 。 。 .

**参数 :**

要件以两个下划线划分(`__`),而修饰者的修饰和价值则用一个下划线来划分(`_`) (中文(简体) ).

示例 `my-block__my-element_my-modifier_some-value`。 。 。 .

**文件结构 :**

-   BEM 实体结构方案: `nested`。 。 。 .
-   项目结构模式: `${entity}${layer?@${layer}}.${tech}`。 。 。 .

**实例:**

```
my-block@layer.js
my-block/_my-modifier.js
my-block/__my-element@layer.js
my-block/__my-element/_my-modifier_some-value.css
my-block/__my-element/_my-modifier_some-value@layer.css
```

### 来源反应

这个 `origin-react` 预设是执行 [反应样式](https://en.bem.info/methodology/naming-convention/#react-style) 命名大会.

此预设基于 [来源](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin) 预设但提供不同的词形和元素分隔符.

**单词图案 :**

每个名称必须匹配正则表达式: `[a-zA-Z0-9]+`。 。 。 .

**实例:** `MyElement`, (中文(简体) ), `myModifier`, (中文(简体) ), `modValue1`。 。 。 .

**参数 :**

元素以一个连字符来划分(`-`),而修饰者的修饰和价值则用一个下划线来划分(`_`) (中文(简体) ).

示例 `MyBlock-MyElement_myModifier_modValue`。 。 。 .

**文件结构 :**

-   文件结构中的元素名称没有任何分隔符.
-   BEM 实体结构方案: `nested`。 。 。 .
-   项目结构模式: `${layer?${layer}.}blocks/${entity}.${tech}`。 。 。 .

**实例:**

```
blocks/MyBlock.js
blocks/MyBlock/_myModifier.js
blocks/MyBlock/MyElement.js
blocks/MyBlock/MyElement/_myModifier_modValue.css
layer.blocks/MyBlock/MyElement/_myModifier_modValue.css
```

### 反应

这个 `react` 预设是执行 [反应样式](https://en.bem.info/methodology/naming-convention/#react-style) 命名大会.

此预设基于 [来源反应](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin-react) 预设但提供另一个项目结构模式,例如 [遗产](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-legacy) 预设.

**单词图案 :**

每个名称必须匹配正则表达式: `[a-zA-Z0-9]+`。 。 。 .

**实例:** `MyElement`, (中文(简体) ), `myModifier`, (中文(简体) ), `modValue1`。 。 。 .

**参数 :**

元素以一个连字符来划分(`-`),而修饰者的修饰和价值则用一个下划线来划分(`_`) (中文(简体) ).

示例 `MyBlock-MyElement_myModifier_modValue`。 。 。 .

**文件结构 :**

-   文件结构中的元素名称没有任何分隔符.
-   BEM 实体结构方案: `nested`。 。 。 .
-   项目结构模式: `${entity}${layer?@${layer}}.${tech}`。 。 。 .

**实例:**

```
MyBlock.js
MyBlock@layer.js
MyBlock/_myModifier.js
MyBlock/_myModifier@layer.js
MyBlock/MyElement/_myModifier_modValue.css
MyBlock/MyElement/_myModifier_modValue@layer.css
```

### 两发子弹

这个 `two-dashes` 预设是执行 [双发样式](https://en.bem.info/methodology/naming-convention/#two-dashes-style) 命名大会.

此预设基于 [来源](https://npmcn.com/package/%40bem/sdk.naming.presets/#readme-origin) 预设但修饰符由两个连字符(`--`) (中文(简体) ).

**单词图案 :**

每个名称必须匹配正则表达式: `[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*`。 。 。 .

**实例:** `my-element`, (中文(简体) ), `myElement`, (中文(简体) ), `element1`, (中文(简体) ), `2element`。 。 。 .

**参数 :**

要件以两个下划线划分(`__`),而修饰者则被两个连字符所分出(`--`),修改值用一个下划线(`_`) (中文(简体) ).

示例 `my-block__my-element--my-modifier_some-value`。 。 。 .

**文件结构 :**

-   BEM 实体结构方案: `nested`。 。 。 .
-   项目结构模式: `${layer?${layer}.}blocks/${entity}.${tech}`。 。 。 .

**实例:**

```
blocks/my-block/--my-modifier.js
blocks/my-block/__my-element/--my-modifier_some-value.css
my-layer.blocks/my-block/__my-element/--my-modifier_some-value.css
```

## 常见问题

### @bem/sdk\.naming\.presets 是什么？

命名预设

### 如何安装 @bem/sdk\.naming\.presets？

在项目目录运行 npm install @bem/sdk\.naming\.presets，或使用 pnpm add / yarn add / bun add。

### @bem/sdk\.naming\.presets 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bem/sdk\.naming\.presets 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bem/sdk\.naming\.presets 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 8\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @bem/sdk\.naming\.presets 可以商用吗？

@bem/sdk\.naming\.presets 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @bem/sdk\.naming\.presets 的下载量有多少？

根据 npm 官方下载统计，@bem/sdk\.naming\.presets 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,604 次，日均约 87 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bem/sdk\.naming\.presets 还在维护吗？

最新版本 0\.2\.3 发布于 2019/02/03（7 年前）；至今共发布 18 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/09/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。