{"id":21482323,"url":"https://github.com/entwicklerstube/b3m","last_synced_at":"2026-04-11T06:41:31.587Z","repository":{"id":66203323,"uuid":"79130923","full_name":"entwicklerstube/b3m","owner":"entwicklerstube","description":"BEM Class-Name Formater ","archived":false,"fork":false,"pushed_at":"2018-03-09T08:19:39.000Z","size":77,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-04T19:41:17.350Z","etag":null,"topics":["bem","css","library","nodejs","sass","two-dashes-style"],"latest_commit_sha":null,"homepage":"https://npmjs.com/b3m","language":"JavaScript","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/entwicklerstube.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":"2017-01-16T15:19:37.000Z","updated_at":"2017-05-29T06:23:12.000Z","dependencies_parsed_at":"2023-03-01T09:30:54.519Z","dependency_job_id":null,"html_url":"https://github.com/entwicklerstube/b3m","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entwicklerstube%2Fb3m","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entwicklerstube%2Fb3m/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entwicklerstube%2Fb3m/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entwicklerstube%2Fb3m/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/entwicklerstube","download_url":"https://codeload.github.com/entwicklerstube/b3m/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244006290,"owners_count":20382443,"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","library","nodejs","sass","two-dashes-style"],"created_at":"2024-11-23T12:32:18.589Z","updated_at":"2025-12-31T00:18:29.389Z","avatar_url":"https://github.com/entwicklerstube.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# b3m\nEasy af BEM formatter which uses the [two-dashes-style](https://en.bem.info/methodology/naming-convention/#two-dashes-style)\n\n[![Build Status](https://travis-ci.org/entwicklerstube/b3m.svg?branch=master)](https://travis-ci.org/entwicklerstube/b3m)\n[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![https://github.com/entwicklerstube/b3m](https://img.shields.io/npm/dm/b3m.svg)](https://www.npmjs.com/package/b3m)\n\n\n## Install\n**npm**\n```\n$ npm install b3m --save-dev\n```\n\n**yarn**\n```\n$ yarn add b3m --dev\n```\n\n## Usage\n\u003e Pass a string and it's a block, pass a array or object and it's a modifier.\n\n```js\nimport b3m from 'b3m'\n\nconst cn = b3m('button')\n\ncn() // button\ncn('element') // button__element\ncn('big', 'blue') // button__big button__blue\ncn(['action', 'disabled']) // button--action button--disabled\ncn('element', ['action']) // button__element button--action\ncn(['action'], 'element') // button--action button__element\ncn({ is: 'clickable' }) // button--is-clickable\ncn({ hidden: true }) // button--hidden\ncn({ hasIcon: true }) // button--has-icon\ncn({ status: 'hasIcon' }) // button--status-has-icon\ncn({ iconType: 'emoji' }) // button--icon-type-emoji\n\n// If you pass something empty it returns a empty string, e.g.\ncn({})\ncn([])\ncn('')\n```\n\n## Example\n**React**\n```jsx\nimport React from 'react'\nimport b3m from 'b3m'\n\nconst cn = b3m('element')\n\nexport default ({buttonStatus = 'visible', iconModifiers = ['big-icon']}) =\u003e (\n  \u003cdiv className={cn()}\u003e\n    \u003cbutton className={cn('button', { status: buttonStatus, blue: true, hover: false })}\u003e\u003c/button\u003e\n    \u003cdiv className={cn('icon', iconModifiers)}\u003e\u003c/div\u003e\n  \u003c/div\u003e  \n)\n\n// rendered:\n\n\u003cdiv class=\"element\"\u003e\n  \u003cbutton class=\"element__button element--status-visible element--blue\"\u003e\u003c/button\u003e\n  \u003cdiv class=\"element__icon element--big-icon\"\u003e\u003c/div\u003e\n\u003c/div\u003e  \n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentwicklerstube%2Fb3m","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fentwicklerstube%2Fb3m","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentwicklerstube%2Fb3m/lists"}