https://github.com/shelfio/bem
https://github.com/shelfio/bem
frontend npm-package
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shelfio/bem
- Owner: shelfio
- License: mit
- Created: 2022-10-26T11:10:32.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-05-31T03:50:34.000Z (8 months ago)
- Last Synced: 2025-05-31T15:17:05.915Z (8 months ago)
- Topics: frontend, npm-package
- Language: TypeScript
- Homepage:
- Size: 174 KB
- Stars: 1
- Watchers: 16
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# Shelf/bem [](https://circleci.com/gh/shelfio/xxxxxx/tree/master)
Slim version of [bem-cn](https://github.com/albburtsev/bem-cn) without mixins, state and other stuff.
## Install
```
$ yarn add @shelf/bem
```
## Usage
```js
import {block} from '@shelf/bem';
const b = block('nav-item');
function NavLink({isActive, href, icon, name}) {
return (
// .nav-item__icon
// .nav-item__link
{name}
);
}
```
## API
### block
You can pass either element or modifiers as a first argument. Modifies can be passed as an array or object.
```js
import {block} from '@shelf/bem';
const b = block('nav-item');
b(); // nav-item
b('link'); // nav-item__link
b(['active']); // nav-item nav-item--active
b({active: true}); // nav-item nav-item--active
```
Second argument is modifiers & could be combined with element. You can pass them as an array or object.
```js
const isActive = true;
b('link', [isActive && 'active']); // nav-item__link nav-item__link--active
const isSelected = true;
b('link', {selected: isSelected}); // nav-item__link nav-item__link--selected
```
### setup
You can setup your own delimiters for element and modifier
```js
import {setup} from '@shelf/bem';
const block = setup({el: '_', mod: '-'});
const b = block('nav-item');
b('link'); // nav-item_link
b('link', ['active']); // nav-item_link nav-item_link-active
```
Additionally you can pass `ns` to customize namespace
```
const block = setup({ns: 'my-app-'});
const b = block('nav-item');
b(); // my-app-nav-item
```
You can also provide custom classMap to map your class names to bem class names. Helpful when you want to use bem with
css modules.
```js
import {setup} from '@shelf/bem';
const block = setup({classMap: {'nav-item__link': 'nav-item__link-13'}});
const b = block('nav-item');
b('link'); // nav-item__link-13
```
## Publish
```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```
## License
MIT © [Shelf](https://shelf.io)