This package has been deprecated

    Author message:

    following the class names becomes hard in real life codebases

    bemact

    0.0.3 • Public • Published

    Bemact

    Version Build Status

    A DRY utility for React that extends React classNames to BEM style with minimal boilerplate code. Inspired partially by "Atomic OOBEMITSCSS".

    Bemact does not modify React component classes, only "pure" HTML elements.

    Example

    var React = require('React')
    var bem = require('bemact').bem
     
    var MyComponent = React.createClass({
        render: function() {
            return bem(
                <div className="parent --customized">
                    <h1 className="child-header">Main Header</h1>
                    <p className="article --pretty">
                        I'm a pretty article <a className="link" href="">with a link</a>!
                    </p>
                    <footer>
                        <p className="untouched">I'm untouched because footer has no className.</p>
                    </footer>
                </div>
            )
        }
    })

    Output in HTML:

    <div class="parent parent--customized">
        <h1 class="parent__child-header">Main Header</h1>
        <p class="parent__article parent__article--pretty">
            I'm a pretty article <a class="article__link" href="">with a link</a>!
        </p>
        <footer>
            <p class="untouched">I'm untouched because footer has no className.</p>
        </footer>
    </div>

    Installation

    npm install --save bemact
    

    Customization

    var BemSetup = require('bemact').BemSetup,
        bem = new BemSetup({ elementPrefix: 'FOO', modifierPrefix: 'bar' })

    So what would be block__element--modifier in original BEM syntax now becomes blockFOOelementbarmodifier. It is recommended you do not use FOO as element prefix and bar as modifier prefix. Use something sane.

    Bemact also exposes the new changed Yandex syntax:

    var bem2015 = require('bemact').bem2015

    The new element prefix is the same as before, but modifier prefix is a single lodash instead: _

    Using with JedWatson/classnames

    classNames is one of the most popular utilities for working with CSS classes in React. Using BEM style with it can lead into quite a lot of repetition:

    var className = 'main-article'
    var headerClassName = classNames(
        'main-article__header',
        {
            'main-article__header--is-read': this.props.read,
            'main-article__header--is-popular': this.props.popular
        },
        'main-article__header--' + (this.props.disabled ? 'disabled' : 'enabled')
    )
     
    return (
        <article className={className}>
            <header className={headerClassName}>
                ...
            </header>
        </article>
    )

    Adding Bemact for post-processing eases the burden:

    var className = 'main-article'
    var headerClassName = classNames(
        'header',
        {
            '--is-read': this.props.read,
            '--is-popular': this.props.popular
        },
        this.props.disabled ? '--disabled' : '--enabled'
    )
     
    return bem(
        <article className={className}>
            <header className={headerClassName}>
                ...
            </header>
        </article>
    )

    No need to repeat yourself.

    Developing

    git clone git@github.com:merri/bemact.git
    cd bemact
    npm install
    npm test
    

    Install

    npm i bemact

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • merri