预设
包中包含默认命名公约的预设和创建自定义命名公约的工具.
导言
您可以使用此软件包 :
- 导入已有预设 命名公约。 。 。 .
- 创建带有自定义命名惯例的预设 .
当您想要根据另一个预设创建一个新的预设时,这个包是有用的,例如,只修改修改器的分隔符,并保持其他选项不变.
说明. 如果您没有可用的 BEM 工程来测试
@bem/sdk.naming.presets软件包,最快速创建的方法是使用 贝姆表达式。 。 。 .
尝试预设
实例可见于 RunKit 编辑器。 。 。 .
快开始
请注意. 用于
@bem/sdk.naming.presets,必须安装 节点.js 8.0+。 。 。 .
在这个快速的起步中,您将学会如何导入带有命名公约的预设,并创建带有自定义命名公约的预设.
要运行 @bem/sdk.naming.presets 软件包 :
- 安装
@bem/sdk.naming.presets软件包。 。 。 . - 导入带有命名公约的预设。 。 。 .
- 创建带有自定义命名公约的预设。 。 。 .
安装 @bem/sdk.naming.presets 软件包
安装 @bem/sdk.naming.presets 软件包,运行以下命令:
$ npm install --save @bem/sdk.naming.presets
导入带有命名公约的预设
要导入带有默认命名常规的预设, 请创建 JavaScript 文件, 并附带任何名称( 例如 , 应用程序.js并插入以下内容:
const originNaming = require('@bem/sdk.naming.presets/origin');
这个代码与原产地命名惯例一起导入了预设. 要导入另一个预设, 更改 origin 到预设名称.
实例:
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 活实例。 。 。 .
在您导入了预设后,您可以将其用于自己的目的,例如创建一个 parse() 函数从 @bem/sdk. naming.entity.parse (英语) 软件包.
示例
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 活实例。 。 。 .
创建带有自定义命名公约的预设
要创建带有自定义命名公约的预设,请使用 创建 函数。 在参数中,传递您要在默认命名惯例中覆盖的选项。 例如,可以定义修饰器的值被等号所划定(=) (中文(简体) ).
示例
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 活实例。 。 。 .
API 参考
创建()
创建指定命名公约的预设.
此函数将从默认的预设中获得所有选项, 以所通过选项覆盖它们并返回结果 。 选项按以下顺序覆盖:
- 默认预设的选项 .
- 来自
userDefaults参数. - 来自
options参数.
/**
* @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() 无参数的函数.
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 活实例。 。 。 .
使用另一个预设作为默认
默认预设是 origin,但可以在 options.preset 参数.
示例
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 活实例。 。 。 .
您可以在 userDefaults 参数。 要使用这种方法,请通过第二个参数中预设的名称.
示例
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 活实例。 。 。 .
如果你通过一个预设名称 userDefaults 参数,它将完全覆盖默认的预设. 例如,所有这些行返回 two-dashes 预设 :
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() 函数.
示例
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 活实例。 。 。 .
命名公约
命名公约的主要思想是,将地名命名为: BEM 实体 尽可能地说明清楚.
本套件包含下列带有命名惯例的预设:
- 来源 ——默认命名公约.
- 遗产 ——与起源命名公约类似,但文件结构组织不同.
- 来源反应 ——原产地混合和反应命名公约.
- 反应 ——以反应风格命名大会.
- 两发子弹 ——根据这一命名公约,修饰者被两个连字符所划分(
--) (中文(简体) ).
此外,还可以发明自己的命名会. 要学会怎么做,看 自定义命名公约。 。 。 .
来源
BEM方法为创建命名规则提供了一个想法,并在其犬类命名公约中落实了这个想法: 来源命名公约。 。 。 .
单词图案 :
每个名称必须匹配正则表达式: [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
遗产
此预设基于 来源 预设但提供了另一个项目结构模式.
单词图案 :
每个名称必须匹配正则表达式: [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}。 。 。 .
实例:
[email protected]
my-block/_my-modifier.js
my-block/[email protected]
my-block/__my-element/_my-modifier_some-value.css
my-block/__my-element/[email protected]
来源反应
这个 origin-react 预设是执行 反应样式 命名大会.
此预设基于 来源 预设但提供不同的词形和元素分隔符.
单词图案 :
每个名称必须匹配正则表达式: [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 预设是执行 反应样式 命名大会.
此预设基于 来源反应 预设但提供另一个项目结构模式,例如 遗产 预设.
单词图案 :
每个名称必须匹配正则表达式: [a-zA-Z0-9]+。 。 。 .
实例: MyElement, (中文(简体) ), myModifier, (中文(简体) ), modValue1。 。 。 .
参数 :
元素以一个连字符来划分(-),而修饰者的修饰和价值则用一个下划线来划分(_) (中文(简体) ).
示例 MyBlock-MyElement_myModifier_modValue。 。 。 .
文件结构 :
- 文件结构中的元素名称没有任何分隔符.
- BEM 实体结构方案:
nested。 。 。 . - 项目结构模式:
${entity}${layer?@${layer}}.${tech}。 。 。 .
实例:
MyBlock.js
[email protected]
MyBlock/_myModifier.js
MyBlock/[email protected]
MyBlock/MyElement/_myModifier_modValue.css
MyBlock/MyElement/[email protected]
两发子弹
这个 two-dashes 预设是执行 双发样式 命名大会.
此预设基于 来源 预设但修饰符由两个连字符(--) (中文(简体) ).
单词图案 :
每个名称必须匹配正则表达式: [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