Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ideyuta/nbem
:gem: nbem is for intuitively write the class name of BEM method. React and others.
https://github.com/ideyuta/nbem
bem class css js
Last synced: about 1 month ago
JSON representation
:gem: nbem is for intuitively write the class name of BEM method. React and others.
- Host: GitHub
- URL: https://github.com/ideyuta/nbem
- Owner: ideyuta
- License: mit
- Created: 2015-10-03T10:27:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-31T08:48:09.000Z (over 7 years ago)
- Last Synced: 2024-09-27T19:40:59.201Z (about 2 months ago)
- Topics: bem, class, css, js
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 28
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nbem
> nbem is for intuitively write the class name of BEM method.
[![NPM version][npm-image]][npm-url]
[![NPM downloads][npm-download-image]][npm-download-url]
[![Build Status][travis-image]][travis-url]
[![Dependency Status][daviddm-image]][daviddm-url]
[![DevDependency Status][daviddm-dev-image]][daviddm-dev-url]
[![License][license-image]][license-url]
## Installation
```
npm i nbem
```
## Usage
##### Use with node.js, browserify, webpack:
```js
var nbem = require(nbem);
var bem = nbem();
```
'&' is indicates the nests.
```js
bem('header'); // => "header"
bem('&nav'); // => "header__nav"
bem('&&item'); // => "header__nav__item"
```
':' is indicates the modifier.
```js
bem('header:global'); // => "header--global"
bem('&nav'); // => "header--global__nav"
```
##### Join classnames:
Add a string or string[] at second argument.
```js
bem('header'); // => "header"
bem('&nav', 'isActive'); // => "header__nav isActive"
bem('&nav', ['isActive', 'isHover']); // => "header__nav isActive isHover"
bem('&&item'); // => "header__nav__item"
```
##### Customize separator:
```js
var config = require(nbem).config;
config.setSeparator('-', '_'); // element, modifier
bem('header:global'); // => "header-global"
bem('&title') // => "header-global_title"
```
## Example
in React of ES6
```js
import React from 'react';
import nbem from 'nbem';
export default class Header extends React.Component {
render() {
const bem = nbem();
return (
Title
Description
);
}
}
```
Render:
```html
Title
Description
```
[npm-url]: https://www.npmjs.com/package/nbem
[npm-image]: https://img.shields.io/npm/v/nbem.svg?style=flat-square
[npm-download-url]: https://www.npmjs.com/package/nbem
[npm-download-image]: https://img.shields.io/npm/dt/nbem.svg?style=flat-square
[travis-url]: https://travis-ci.org/ideyuta/nbem
[travis-image]: https://img.shields.io/travis/ideyuta/nbem.svg?style=flat-square
[daviddm-url]: https://david-dm.org/ideyuta/nbem
[daviddm-image]: https://img.shields.io/david/ideyuta/nbem.svg?style=flat-square
[daviddm-dev-url]: https://david-dm.org/ideyuta/nbem#info=devDependencies
[daviddm-dev-image]: https://img.shields.io/david/dev/ideyuta/nbem.svg?style=flat-square
[license-url]: http://opensource.org/licenses/MIT
[license-image]: https://img.shields.io/npm/l/nbem.svg?style=flat-square