{"id":19252735,"url":"https://github.com/morevm/bem-classnames","last_synced_at":"2026-02-09T11:03:55.932Z","repository":{"id":220838155,"uuid":"752741206","full_name":"MorevM/bem-classnames","owner":"MorevM","description":"Simple utility for generating classnames according to the BEM methodology.","archived":false,"fork":false,"pushed_at":"2025-01-13T09:00:28.000Z","size":415,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T22:05:27.143Z","etag":null,"topics":["bem","bem-naming","typescript"],"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/MorevM.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-02-04T17:19:00.000Z","updated_at":"2025-01-13T09:00:33.000Z","dependencies_parsed_at":"2024-11-09T18:39:24.365Z","dependency_job_id":null,"html_url":"https://github.com/MorevM/bem-classnames","commit_stats":null,"previous_names":["morevm/bem-classnames"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fbem-classnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fbem-classnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fbem-classnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fbem-classnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorevM","download_url":"https://codeload.github.com/MorevM/bem-classnames/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249161344,"owners_count":21222474,"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","bem-naming","typescript"],"created_at":"2024-11-09T18:28:14.485Z","updated_at":"2026-02-09T11:03:55.844Z","avatar_url":"https://github.com/MorevM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Promo image of @morev/bem-classnames package](./.github/images/banner.svg)\n\n![Stability of \"master\" branch](https://img.shields.io/github/actions/workflow/status/MorevM/bem-classnames/build.yaml?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![Last commit](https://img.shields.io/github/last-commit/morevm/bem-classnames)\n![Release version](https://img.shields.io/github/v/release/morevm/bem-classnames?include_prereleases)\n![GitHub Release Date](https://img.shields.io/github/release-date/morevm/bem-classnames)\n![Keywords](https://img.shields.io/github/package-json/keywords/morevm/bem-classnames)\n\n# @morev/bem-classnames\n\nSimple utility for generating classnames according to the [BEM methodology](https://en.bem.info/methodology/).\n\n---\n\n\u003e **IMPORTANT:** The library is not transpiled.\n\u003e\n\u003e By keep transpiling libraries we push web backward with legacy code which is unneeded for most of the users.\n\u003e\n\u003e If you need to support legacy users, you can optionally transpile the library in your build pipeline.\n\n---\n\n## Installation\n\n### Using `npm`:\n\n```bash\nnpm install @morev/bem-classnames\n```\n\n### Using `yarn`:\n\n```bash\nyarn add @morev/bem-classnames\n```\n\n## Usage\n\nModule exports a BEM classnames factory that allows flexibly customize the syntax.\n\nRecommended usage is create and export your own `bem-factory` with options suitable for you and next use it to keep classnames consistent.\nWith this usage you can make module to work with any BEM-like alternative syntax.\n\n### bem-factory.js\n\n```js\nimport { bemClassnames } from '@morev/bem-classnames';\n\n// Default options\nexport const bemFactory = bemClassnames({\n  hyphenate: true,\n  namespace: '',\n  delimiters: {\n    element: '__',\n    modifier: '_',\n    modifierValue: '_',\n  },\n});\n```\n\nNext, import this factory into your component, declare the `block` name and the function call will transform JS declarations into classnames:\n\n### block.js\n\n```js\nimport { bemFactory } from 'bem-factory.js';\nconst b = bemFactory('block');\n\nb();\n// block\n\nb({ active: true })\n// block block_active\n\nb({ active: true, iterator: 1 })\n// block block_active block_iterator_1\n\nb({ active: true }, 'static', 'is-pinned')\n// block block_active static is-pinned\n\nb('element');\n// block__element\n\nb('element', { static: true });\n// block__element block__element_static\n\nb('element', 'static');\n// block__element static\n```\n\n## Resource links\n\n[BEM methodology](https://en.bem.info/methodology/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fbem-classnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorevm%2Fbem-classnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fbem-classnames/lists"}