Run results for: Get bem classname

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser: Chrome 117

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
via object	3678596.0 Ops/sec
via bem func with modules	724640.9 Ops/sec
classname generation with bem func	3911197.2 Ops/sec
manual classname generation	1405934976.0 Ops/sec

Script Preparation code:

var getBemClassName =
	(block) =>
	(elem, mod) => {
		const isNonEmptyString = (str) => typeof str === 'string' && str.length > 0;
		const hasElem = isNonEmptyString(elem);
		const hasMod = isNonEmptyString(mod);

		if (hasElem && hasMod) return `${block}__${elem}--${mod}`;
		if (!hasElem && hasMod) return `${block}--${mod}`;
		if (hasElem && !hasMod) return `${block}__${elem}`;

		return block;
	};

var getModuleBemClassName =
	(styles) =>
	(block) =>
	(elem, mod) =>
		styles[getBemClassName(block)(elem, mod)];

var STYLES = {
  'block': 'block',
  'block--mod1': 'block--mod1',
  'block--mod2': 'block--mod2',
  'block__element': 'block__element',
  'block__element--mod1': 'block__element--mod1',
  'block__element--mod2': 'block__element--mod2',
  'block__element2': 'block__element2'
};
var KEYS = Object.keys(STYLES);

Tests:

via object
var c1 = STYLES['block']; var c2 = STYLES['block--mod1']; var c3 = STYLES['block--mod2']; var c4 = STYLES['block__element']; var c5 = STYLES['block__element--mod1']; var c6 = STYLES['block__element--mod2']; var c7 = STYLES['block__element2'];
via bem func with modules
var bem = getModuleBemClassName(STYLES)('block') var c1 = bem(); var c2 = bem(undefined, 'mod1'); var c3 = bem(undefined, 'mod2'); var c4 = bem('element'); var c5 = bem('element', 'mod1'); var c6 = bem('element', 'mod2'); var c7 = bem('element2');
classname generation with bem func
var bem = getBemClassName('block') var c1 = bem(); var c2 = bem(undefined, 'mod1'); var c3 = bem(undefined, 'mod2'); var c4 = bem('element'); var c5 = bem('element', 'mod1'); var c6 = bem('element', 'mod2'); var c7 = bem('element2');
manual classname generation
var c1 = 'block'; var c2 = 'block--mod1'; var c3 = 'block--mod2'; var c4 = 'block__element'; var c5 = 'block__element--mod1'; var c6 = 'block__element--mod2'; var c7 = 'block__element2';

Run results for: Get bem classname

via object

via bem func with modules

classname generation with bem func

manual classname generation