{"id":15690045,"url":"https://github.com/jahed/bem","last_synced_at":"2025-05-07T23:22:20.042Z","repository":{"id":47645230,"uuid":"120901099","full_name":"jahed/bem","owner":"jahed","description":"Functions for using BEM naming conventions in CSS and CSS Modules and applying them seamlessly in JavaScript.","archived":false,"fork":false,"pushed_at":"2021-08-19T20:49:24.000Z","size":312,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T21:17:38.986Z","etag":null,"topics":["bem","css","css-modules","javascript","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jahed.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}},"created_at":"2018-02-09T12:07:05.000Z","updated_at":"2022-01-08T15:34:03.000Z","dependencies_parsed_at":"2022-09-26T19:42:54.688Z","dependency_job_id":null,"html_url":"https://github.com/jahed/bem","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahed%2Fbem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahed%2Fbem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahed%2Fbem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahed%2Fbem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jahed","download_url":"https://codeload.github.com/jahed/bem/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252969049,"owners_count":21833402,"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","css","css-modules","javascript","react"],"created_at":"2024-10-03T18:06:44.419Z","updated_at":"2025-05-07T23:22:20.021Z","avatar_url":"https://github.com/jahed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @jahed/bem\n\n[![npm](https://img.shields.io/npm/v/@jahed/bem.svg)](https://www.npmjs.com/package/@jahed/bem)\n[![author](https://img.shields.io/badge/author-jahed-%23007fff)](https://jahed.dev/)\n\nFunctions for using BEM in CSS and CSS Modules.\n\n- [Using CSS Modules with BEM](https://jahed.dev/2018/02/09/using-css-modules-with-bem/)\n- [@jahed/bem, A Brief History](https://jahed.dev/2018/02/09/jahed-bem-a-brief-history/)\n\n## Installation\n\n```bash\n# NPM\nnpm install @jahed/bem\n\n# Yarn\nyarn add @jahed/bem\n```\n\n## Usage\n\n```js\nimport { bem } from '@jahed/bem'\n\nconst className = bem('MyElement', {\n  color: 'red',\n  active: true,\n  disabled: false\n})\n\nconsole.log(className)\n// .MyElement .MyElement--color--red .MyElement--active\n```\n\n### CSS Modules\n\nThe example below assumes you've configured CSS Modules to render classes with a `-hash` suffix.\n\n```js\nimport { bemModule } from '@jahed/bem'\nimport styles from 'styles.module.css'\n\nconst bem = bemModule(styles)\n\nconst className = bem('MyElement', {\n  color: 'red',\n  active: true,\n  disabled: false\n})\n\nconsole.log(className)\n// .MyElement-hash .MyElement-hash--color--red .MyElement-hash--active\n```\n\nFor more thorough examples, see the tests and blog posts linked above.\n\n## API\n\nFor complete API documentation, [see the documentation website](https://jahed.github.io/bem/).\n\n**`bem(block: string, modifiers: object\u003cstring, (boolean|number|string)?\u003e): string`**\n\nGenerates BEM-compliant class names for the given `block` (or `element`) with modifiers.\n\n[Examples](src/bemModule.test.ts)\n\n---\n\n**`bemModule(cssModuleLocals): bem`**\n\nGenerates a `bem`-compliant function which maps the resulting class names to the given\n`cssModuleLocals` map.\n\n[Examples](src/bemModule.test.ts)\n\n---\n\n**`join(...string): string`**\n\nJoins the given `string`s with a whitespace (` `), filtering any falsy\nvalues (such as `undefined`, `null`, `false`, `''`).\n\n[Examples](src/join.test.ts)\n\n---\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahed%2Fbem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjahed%2Fbem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahed%2Fbem/lists"}