Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@bem/naming
Advanced tools
Tool for working with BEM entity representations: allows you to parse string representation and stringify object representation.
$ npm install --save @bem/naming
const bemNaming = require('@bem/naming');
const BemEntityName = require('@bem/entity-name');
bemNaming.parse('button__text'); // { block: 'button', elem: 'text' }
const entityName = new BemEntityName({ block: 'button', mod: 'checked' });
bemNaming.stringify(entityName); // button_checked
The BemEntityName class describes the representation of a BEM entity name.
To define BEM entities, we often use a special string format that allows us to define exactly which entity is represented.
According to the original BEM naming convention, it looks like this:
'block[_block-mod-name[_block-mod-val]][__elem-name[_elem-mod-name[_elem-mod-val]]]'
(Parameters within square brackets are optional)
Examples:
block-name
.block-name_mod-name_mod-val
.block-name_mod
.block-name__elem-name
.block-name__elem-name_mod-name_mod-val
.block-name__elem_mod
.The original naming uses the following delimiters:
__
— to separate an element from a block_
— to separate a modifier name from a block or element and to separate a modifier value from a modifier nameThe BEM methodology uses a flat structure inside blocks. This means that a BEM entity can't be represented as an element of another element, and the following string representation will be invalid:
'block__some-elem__sub-elem'
For more information, see the FAQ:
Why doesn't BEM recommend using elements within elements (block__elem1__elem2)?
Also, a BEM entity can't be a block modifier and an element modifier simultaneously, so the following string representation will be invalid:
'block_block-mod-name_block-mod-val__elem-name_elem-mod-name_elem-mod-val'
According to this convention elements are delimited with two underscores (__
), modifiers are delimited by two hyphens (--
), and values of modifiers are delimited by one underscore (_
).
Read more in the Guidelines.
Example:
const twoDashesNaming = require('@bem/naming')('two-dashes');
twoDashesNaming.parse('block__elem'); // { block: 'block', elem: 'elem' }
twoDashesNaming.parse('block--mod_val'); // { block: 'block',
// mod: { name: 'mod', val: 'val' } }
twoDashesNaming.stringify({
block: 'block',
elem: 'elem',
mod: 'mod'
});
// ➜ block__elem--mod
Use the bemNaming function to create an instance where you can manage your own naming convention.
Example:
const bemNaming = require('@bem/naming');
const myNaming = bemNaming({
elem: '-',
mod: { name: '--', val: '_' }
wordPattern: '[a-zA-Z0-9]+' // because element and modifier's separators include
}); // hyphen in it, we need to exclude it from block,
// element and modifier's name
myNaming.parse('block--mod_val'); // { block: 'block',
// mod: { name: 'mod', val: 'val' } }
myNaming.stringify({ // 'blockName-elemName--simpleElemMod'
block: 'blockName',
elem: 'elemName',
mod: 'simpleElemMod'
});
Parameter | Type | Description | Default |
---|---|---|---|
elem | string | Separates element's name from block. | __ |
mod | string , { name: string, val: string } | Separates modifier from block or element. | _ |
mod.name | string | Separates a modifier name from a block or an element. | _ |
mod.val | string | Separates the value of a modifier from the modifier name. | Default as the value of the mod.name . |
wordPattern | string | Defines which characters can be used in names of blocks, elements, and modifiers. | [a-z0-9]+(?:-[a-z0-9]+)* |
Parameter | Type | Description |
---|---|---|
str | string | BEM entity name representation. |
Parses the string into an instance of BemEntityName
.
Example:
const bemNaming = require('@bem/naming');
bemNaming.parse('block__elem_mod_val');
// ➜ BemEntityName {
// block: 'block',
// elem: 'elem',
// mod: { name: 'mod', val: 'val' }
// }
Parameter | Type | Description |
---|---|---|
entityName | BemEntityName , object | BEM entity name representation. |
Forms a string from the instance of BemEntityName
.
Example:
const bemNaming = require('@bem/naming');
const BemEntityName = require('@bem/entity-name');
bemNaming.stringify(new BemEntityName({
block: 'block',
elem: 'elem',
mod: { name: 'mod', val: 'val' }
});
// ➜ block__elem_mod_val
String to separate an element from a block.
String to separate a modifier name from a block or element.
String to separate a modifier value from the name of the modifier.
Code and documentation copyright 2014 YANDEX LLC. Code released under the Mozilla Public License 2.0.
FAQs
Manage naming of BEM entities
The npm package @bem/naming receives a total of 107 weekly downloads. As such, @bem/naming popularity was classified as not popular.
We found that @bem/naming demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.