{"id":20730147,"url":"https://github.com/luudjacobs/better-bem","last_synced_at":"2025-04-23T21:22:22.681Z","repository":{"id":35104755,"uuid":"207291996","full_name":"LuudJacobs/better-bem","owner":"LuudJacobs","description":"Chainable BEM className generator with CSS Modules support","archived":false,"fork":false,"pushed_at":"2023-02-09T20:47:20.000Z","size":108,"stargazers_count":2,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T03:41:12.288Z","etag":null,"topics":["bem","classnames","css-modules","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LuudJacobs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-09T11:20:11.000Z","updated_at":"2023-02-09T20:38:21.000Z","dependencies_parsed_at":"2024-06-21T14:18:17.594Z","dependency_job_id":"37680b6d-ff75-4302-8df2-d14a7564fedf","html_url":"https://github.com/LuudJacobs/better-bem","commit_stats":{"total_commits":35,"total_committers":5,"mean_commits":7.0,"dds":0.5714285714285714,"last_synced_commit":"bab09ffce6e142a28eccf8733f9928cead46699d"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuudJacobs%2Fbetter-bem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuudJacobs%2Fbetter-bem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuudJacobs%2Fbetter-bem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuudJacobs%2Fbetter-bem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LuudJacobs","download_url":"https://codeload.github.com/LuudJacobs/better-bem/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250515326,"owners_count":21443371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","classnames","css-modules","javascript"],"created_at":"2024-11-17T05:09:59.429Z","updated_at":"2025-04-23T21:22:22.666Z","avatar_url":"https://github.com/LuudJacobs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# better-BEM 2.x\n\nbetter-BEM is a dynamic classname generator using [BEM methodology](https://en.bem.info/methodology/quick-start/) (`.block__element--modifier`) which supports [CSS Modules](https://github.com/css-modules/css-modules). better-BEM is [chainable](#Chaining-and-modifier-inheritance) and allows [modifier inheritance](#Chaining-and-modifier-inheritance). **Disclaimer:** In contrast to what the package name suggests, better-BEM _might not actually be better_ than other packages handling BEM classname generation. It definitely is better than better-BEM 1.x.\n\n## Getting Started\n\n### Installing\n\n```shell\n# install\nnpm i better-bem\n```\n\n```javascript\n// import\nimport bem from 'better-bem';\n```\n\n\n## Usage\n\n\u003e bem( [_classNames_ [, _mods_ [, _classNameMap_ [, _strict_ [, _glue_ ] ] ] ] ] )\n\n```javascript\nconst className = bem('article').el('header').mod('large').el('title').mod('red').cn;\n\ndocument.querySelector('h1').className = className;\n// =\u003e \u003ch1 class=\"article__header__title article__header__title--large article__header__title--red\"\u003e ...\n```\n\nJump to [examples](#Examples).\n\n### Parameters\n\n#### classNames\n\nClassname(s) which will form the 'block' part of the generated classname(s).\n\n**Optional**\n\n**Default:** `[]`\n\n**Accepts:** _String_, _object_ or _array_ of _strings_ and/or _objects_\n\nPlease refer to the [ClassName parameter usage](#ClassName-parameter-usage) section for details on how this parameter works.\n\n#### mods\n\nModifiers for the generated classnames. Modifiers are passed down the chain, see the section on [Chaining and modifier inheritance](#Chaining-and-modifier-inheritance).\n\n**Optional**\n\n**Default:** `[]`\n\n**Accepts:** _String_, _object_ or _array_ of _strings_ and/or _objects_\n\nSee [ClassName parameter usage](#ClassName-parameter-usage) for more details.\n\n#### classNameMap\n\nObject which maps input classnames to output classnames.\n\n**Optional**\n\n**Default:** `{}`\n\n**Accepts:** _Object_\n\nSee [using className maps](#Using-CSS-Modules)\n\n#### strict\n\nWhen strict is true _and_ when classNameMap isn't empty, classnames which aren't mapped in classNameMap will be ignored.\n\n**Optional**\n\n**Default:** `true`\n\n**Accepts:** _Boolean_\n\nSee [using className maps](#Using-CSS-Modules)\n\n#### glue\n\nObject with strings which will be used to concat classnames. If not set these fall back to `--` for modifiers, `__` for element classnames and `-` for key-value modifiers. See [examples](#Custom-glue-strings).\n\n**Optional**\n\n**Default:** `{}`\n\n**Accepts:** _Object_\n\n### Return value\n\n\u003e _Object_ { _string_ cn, _function_ el, _function_ mod }\n\n#### cn\n\nOutputted classname string for current BEM chain. **Note:** All classnames are checked for valid characters using the following regular expression: `/^(-[_a-zA-Z]|[_a-zA-Z][-_a-zA-Z0-9])[-_a-zA-Z0-9]*$/`\n\n#### el\n\n\u003e _function_ el( [ _elementClassNames_ ] )\n\nFunction to push a new element on the BEM chain. See [chaining](#Chaining-and-modifier-inheritance) for examples.\n\n##### elementClassNames\n\n**Default:** `[]`\n\n**Accepts:** _String_, _object_ or _array_ of _strings_ and/or _objects_\n\nSee [ClassName parameter usage](#ClassName-parameter-usage) for more details.\n\n#### mod\n\n\u003e _function_ mod( [ _modifiers_ ] )\n\nFunction to add a modifier the current BEM className and all descendants. See [Chaining and modifier inheritance](#Chaining-and-modifier-inheritance) for examples.\n\n##### modifiers\n\n**Default:** `[]`\n\n**Accepts:** _String_, _object_ or _array_ of _strings_ and/or _objects_\n\nSee [ClassName parameter usage](#ClassName-parameter-usage) for more details.\n\n\n## ClassName parameter usage\n\n`bem()`, `el()` and `mod()` all accept the same types of parameters. These types are:\n\n* a _string_ containing a single classname or modifier\n* a _string_ containing multiple classnames or modifiers separated by spaces\n* an _object_ where the keys are used as classnames or modifiers when the related value is thruthy\n  * for `mod()` key-value pairs are mapped as a `key-value` string when the value is a string or a number\n* an _array_ containing any of the above\n\n| Parameter value | classnames | modifiers |\n| :--- | :--- | :--- |\n| `\"foobar\"` | `\"foobar\"` | `\"--foobar\"` |\n| `\"foo bar\"` | `\"foo bar\"` | `\"--foo\"`, `\"--bar\"` |\n| `{ foo: true, bar: 0, prop: \"value\" }` | `\"foo mod\"` | `\"--foo\"`, `\"--bar-0\"`, `\"--prop-value\"` |\n| `[ \"foo bar\", { prop: \"value\" } ]` | `\"foo bar mod\"` | `\"--foo\"`, `\"--bar\"`, `\"--prop-value\"` |\n\n\n## Examples\n\n### Chaining and modifier inheritance\n\n```javascript\nconst header = bem('header');\nconsole.log(header.cn); // \"header\"\n\nconst title = header.el('text title');\nconsole.log(title.cn); // \"header__text header__title\"\n\nconst blueTitle = title.mod({ color: 'blue' });\nconsole.log(blueTitle.cn);\n// \"header__text header__text--color-blue header__title header__title--color-blue\"\n\nconst emphasizedText = blueTitle.el('emp').mod('bold');\nconsole.log(emphasizedText.cn);\n// \"header__text__emp header__title__emp header__text__emp--color-blue\n//   header__title__emp--color-blue header__text__emp--bold header__title__emp--bold\"\n\n// note that modifiers are inherited by child elements\n```\n\n### Using CSS Modules\n\n```css\n/* styles.css */\n.header {\n\tfont-size: 2em;\n}\n\n.header__title {\n\tfont-weight: bold;\n}\n\n.header__title--blue {\n\tcolor: blue;\n}\n```\n\n```javascript\nimport styles from './styles.css';\n\nconst header = bem('header', 'blue', styles);\nconsole.log(header.cn); // \"header\"\n// note that \"header--blue\" is omitted from the output, because it's not defined in styles.css\n\nconst title = header.el('title');\nconsole.log(title.cn); // \"header__title header__title--blue\"\n// both the base classname and modified classname are outputted, since they are defined in styles.css\n// note that the 'blue' modifier is still inherited\n\nconst nonStrictHeader = bem('header', 'blue', styles, false);\nconsole.log(nonStrictHeader.cn); // \"header header--blue\"\n// now strict is set to `false`, all classnames will be outputted\n```\n\n### Custom glue strings\n\n```javascript\nconst defaultGlue = bem('element', [{ color: 'blue' }], {}, true).el('child');\nconsole.log(defaultGlue.cn); // \"element__child element__child--color-blue\"\n\nconst customGlue = bem('element', [{ color: 'blue' }], {}, true, { el: '_', mod: '-', prop: '--' }).el('child');\nconsole.log(customGlue.cn); // \"element_child element_child-color--blue\"\n```\n\n\n## Built With\n\n* [typechecker](https://github.com/bevry/typechecker)\n* [array-flatten](https://github.com/blakeembrey/array-flatten)\n\n\n## Versioning\n\nbetter-BEM uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/LuudJacobs/better-bem/tags).\n\n\n## Authors\n\n* **Luud Jacobs** [GitHub](https://github.com/LuudJacobs) - [Website](https://luud.dev)\n\n\n## License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details\n\n\n## Related\n\n* [React-Better-BEM](https://github.com/LuudJacobs/React-Better-BEM) - React component using better-BEM\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluudjacobs%2Fbetter-bem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluudjacobs%2Fbetter-bem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluudjacobs%2Fbetter-bem/lists"}