@helioscompanies/bem-classnames

bem-classnames

JavaScript and Sass utilities to manage BEM class names

Install with npm or Yarn:

npm:

npm install @helioscompanies/bem-classnames

Yarn (note that yarn add automatically saves the package to the dependencies in package.json):

yarn add @helioscompanies/bem-classnames

Usage

JavaScript

JavaScript API

// file: bem-config.js

import { kebabCase } from "lodash";
import { ReactHelper } from "@helioscompanies/bem-classnames";

export default new ReactHelper({ blockFormatter: (name) => `my-${name}`, formatter: kebabCase });

// file: FooBar.js

import bem from "bem-config";
import React, { Component } from "react";

import "FooBar.scss";

class FooBar extends Component {
  render() {
    return (
      <div className={ bem.block(this) }>
        <div className={ bem.element(this, "inner") } />
      </div>
    );
  }
}

FooBar.className = 'FooBar';

render(<FooBar className="test" />, document.getElementById("test"));

// <div class="my-foo-bar test">
//   <div class="my-foo-bar__inner" />
// </div>

Scss

Scss API

// file: bem-config.scss

@import "~sassdash/index";
@import "~@helioscompanies/bem-classnames/index";

@function -my-bem-block-formatter($name) {
  @return "my-#{ $name }";
}

$-my-bem-config: bem-config((
  formatter: get-function(_kebab-case),
  block-formatter: get-function(-my-bem-block-formatter) 
)) !default;

// file: FooBar.scss

@import "bem-config.scss";

#{ bem-block(FooBar, null, test) } {
  // ...
}

#{ bem-block(FooBar, ted, test) } {
  // ...
}

#{ bem-element(FooBar, inner) } {
  // ...
}

// .my-foo-bar.test {}
// .my-foo-bar.my-foo-bar_ted.test {}
// .my-foo-bar__inner {}