https://github.com/entwicklerstube/b3m

BEM Class-Name Formater
https://github.com/entwicklerstube/b3m

bem css library nodejs sass two-dashes-style

Last synced: 3 months ago
JSON representation

BEM Class-Name Formater

• Host: GitHub
• URL: https://github.com/entwicklerstube/b3m
• Owner: entwicklerstube
• License: mit
• Created: 2017-01-16T15:19:37.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-03-09T08:19:39.000Z (over 8 years ago)
• Last Synced: 2025-03-04T19:41:17.350Z (over 1 year ago)
• Topics: bem, css, library, nodejs, sass, two-dashes-style
• Language: JavaScript
• Homepage: https://npmjs.com/b3m
• Size: 75.2 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# b3m

Easy af BEM formatter which uses the [two-dashes-style](https://en.bem.info/methodology/naming-convention/#two-dashes-style)

[![Build Status](https://travis-ci.org/entwicklerstube/b3m.svg?branch=master)](https://travis-ci.org/entwicklerstube/b3m)

[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

[![https://github.com/entwicklerstube/b3m](https://img.shields.io/npm/dm/b3m.svg)](https://www.npmjs.com/package/b3m)

## Install

**npm**

```

$ npm install b3m --save-dev

```

**yarn**

```

$ yarn add b3m --dev

```

## Usage

> Pass a string and it's a block, pass a array or object and it's a modifier.

```js

import b3m from 'b3m'

const cn = b3m('button')

cn() // button

cn('element') // button__element

cn('big', 'blue') // button__big button__blue

cn(['action', 'disabled']) // button--action button--disabled

cn('element', ['action']) // button__element button--action

cn(['action'], 'element') // button--action button__element

cn({ is: 'clickable' }) // button--is-clickable

cn({ hidden: true }) // button--hidden

cn({ hasIcon: true }) // button--has-icon

cn({ status: 'hasIcon' }) // button--status-has-icon

cn({ iconType: 'emoji' }) // button--icon-type-emoji

// If you pass something empty it returns a empty string, e.g.

cn({})

cn([])

cn('')

```

## Example

**React**

```jsx

import React from 'react'

import b3m from 'b3m'

const cn = b3m('element')

export default ({buttonStatus = 'visible', iconModifiers = ['big-icon']}) => (

  


    

    


  
  

)


// rendered:



  

  


  


```