https://github.com/jlengstorf/bemmit

A small utility for quickly generating BEM-style naming for CSS classes.
https://github.com/jlengstorf/bemmit

bem css npm-package utility

Last synced: 3 months ago
JSON representation

A small utility for quickly generating BEM-style naming for CSS classes.

• Host: GitHub
• URL: https://github.com/jlengstorf/bemmit
• Owner: jlengstorf
• License: isc
• Created: 2016-10-04T21:32:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-22T23:07:39.000Z (almost 8 years ago)
• Last Synced: 2024-10-19T10:46:10.224Z (3 months ago)
• Topics: bem, css, npm-package, utility
• Language: JavaScript
• Size: 9.77 KB
• Stars: 5
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bemmit

[![Build Status](https://travis-ci.org/jlengstorf/bemmit.svg?branch=master)](https://travis-ci.org/jlengstorf/bemmit) [![Code Climate](https://codeclimate.com/github/jlengstorf/bemmit/badges/gpa.svg)](https://codeclimate.com/github/jlengstorf/bemmit) [![Test Coverage](https://codeclimate.com/github/jlengstorf/bemmit/badges/coverage.svg)](https://codeclimate.com/github/jlengstorf/bemmit/coverage)

A small utility for quickly generating [BEM-style naming for CSS classes](http://getbem.com/naming/).

## Installation

``` sh

# Install the package

npm install --save bemmit

```

## Usage

``` js

// Load bemmit

var bemmit = require('bemmit');

// Create a block called 'photo'.

var getClass = bemmit('photo');

// Get the block classname.

getClass(); // -> photo

// Get the block classname with the modifiers 'active' and 'round'.

getClass(null, ['active', 'round']); // -> photo photo--active photo--round

// Get an element class for the caption

getClass('caption'); // -> photo__caption

// Get an element class for the share button with the modifier 'pinterest'.

getClass('share', ['pinterest']); // -> photo__share photo__share--pinterest

```

## API

### `bemmit(blockName)`

Generates a function that will return BEM-style CSS classnames.

#### Parameters

- `blockName` — the name of the block. This is used as the base of the class name.

#### Return Value

- Function — a function that will generate CSS class names, with optional `element` and `modifiers` parameters.

### `bemmit(blockName)([element][, [modifiers]])`

Generates BEM-style CSS classname(s).

#### Parameters

- `element` (optional) — the element name

- `modifiers` (optional) — an array of modifiers for the class

#### Return Value

- String — the class or classes

#### Examples of Usage in Markup

``` js

var bemmit = require('bemmit');

// Create an instance of bemmit.

var getClass = bemmit('my-block');

// Now you can quickly add BEM-friendly classes to your HTML:

var myMarkup = `



    
Choose Your Weapon

    


        


            Rubber Chicken

        

        


            Feather

        

        


            Colorful Language

        

    



`;

```


This generates the following markup:

``` html



    
Choose Your Weapon

    


        


            Rubber Chicken

        

        


            Feather

        

        


            Colorful Language

        

    



```