React ♥️ BEM

Using BEM in React ecosystem

Problems with styling

Solutions

CSS in JS: inline styles

CSS in JS: pros and cons

CSS modules: pros and cons

BEM is a methodology, that makes your front-end code reusable, scalable,

more strict and explicit

getbem.com

BEM

BEM: pros and cons

BEM in React: straightforward way

BEM in React: composable classNames

BEM in React: some weird stuff...

BEM in React: BEMJSON

Yummies

Yummies

import Yummies from '@yummies/yummies';

class Popup extends Yummies.Component {
  render() {
    return {
      block: 'popup',
      mods: {
        visible: this.props.visible
      },
      content: [
        {
          elem: 'overlay'
        },
        {
          elem: 'content',
          content: this.props.children
        }
      ]
    };
  }
}

github.com/yummies

Look ma, I can do inheritance!

import Yummies from '@yummies/yummies';
import Input from '../input';

class Checkbox extends Input {
    
  // ...
  
  render() {
    const template = super.render();

    template.block = 'checkbox';

    template.mods = {
      ...template.mods,
      checked: this.state.checked
    };

    return template;
  }
}

github.com/yummies

Why it didn't quite work out

• patching React leads to a whole bunch of problems
  • maintainability hell
  • performance issues
  • legacy-browsers support
  • using external solutions was challenging
    (react-router, react-dnd, components from npm, etc.)
    
    
• inheritance is not such a good idea after all
  • harder to maintain with the growing codebase
  • some unpredictable side-effects

reBEM

Why not just compose classNames?

BEMify external components

import React from 'react';
import Modal from 'react-modal2';
import { stringify as b } from 'rebem-classname';

const block = 'popup';

class Popup extends React.Component {
  render() {
    return (
      <Modal
        backdropClassName={b({ block, elem: 'overlay' })}
        modalClassName={b({ block, mods: { visible: this.props.visible } })}>
        {this.props.children}
      </Modal>
    );
  }
}

Testing: the same abstractions

github.com/rebem/enzyme

+

const component = shallow(
    <Popup visible={true} />
);

it('should be popup block', function() {
    expect(component).to.be.a.block('popup');
});

it('should have visible modifier', function() {
    expect(component).to.have.mods({ visible: true });
});


it('should have overlay element', function() {
    expect(component.findBEM({ block: 'popup', elem: 'overlay' })).to.have.length(1);
});

it('should have content element', function() {
    expect(component.findBEM({ block: 'popup', elem: 'content' })).to.have.length(1);
});

github.com/mistadikay/chai-bem

+

Even in... CSS

github.com/rebem/css

// example is in less, but you can use any preprocessor or just vanilla CSS
:block(popup) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;

  &:mod(visible) {
    opacity: 1;
  }

  &:elem(overlay) {
    background: rgba(0, 0, 0, 0.5);
  }

  &:elem(content) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

one more thing...

github.com/bem/bem-components

BEM redefinition levels

en.bem.info

reBEM layers

reBEM layers

github.com/rebem/layers-loader

• easily create themes
• share and compose entire component libraries
• simplify your apps
• concentrate on app functionality, not components

A history of a button.

/*
.
└──/core-components
   └── /button
       └── /index.js
*/
export default function Button({ mods, mix, children, ...props }) {
  return (
    <label block="button" mods={mods} mix={mix}>
      <input block="button" elem="control" type="button" {...props} />
      {children}
    </label>
  );
}

Chapter 1: core

Chapter 2: reset

/*
.
└──/theme-reset
   └── /button
       └── /styles.less
*/
.button {
  display: inline-block;
  box-sizing: border-box;

  &__control {
    box-sizing: border-box;
    background: none;
    appearance: none;
    outline: 0;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: none;
    line-height: normal;

    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
  }
}

A history of a button.

Chapter 3: custom

/*
.
└──/custom-components
   └── /button
      └── /index.js
*/
import Button from '#button';

export default class extends React.Component {
  renderIcon(icon) {
    if (icon) {
      return <span block="button" elem="icon" style={{ backgroundImage: icon }} />;
    }

    return null;
  },

  render() {
    return (
      <Button {...props}>
        {children}
        {this.renderIcon(this.props.icon)}
      </Button>
    );
  }
}

A history of a button.

Chapter 4: product

/*
.
└──/product-theme
   └── /button
      └── /index.js
      └── /styles.less
*/
import Button from '#button';

export default function Button({ children, ...props }) {
    return (
      <Button {...props}>
        {children}
        <div block="button" elem="mask" />
      </Button>
    );
}

.button {
  // ...

  &__mask {
    position: absolute;
    background: #f00;
    border: 2px solid #000;
  }
}

A history of a button.

Final chapter: app

/*
.
└──/app
   └── /somewhere.js
*/

import Button from '#button';

class SomeAppComponent extends React.Component {
    // ...
    return (
      //...
        <Button
          mix={{ block: 'my-app', elem: 'button' }}
          icon="never-gonna-give-you-up.png"
          onClick={doStuff}>
          {'Click me'}
        </Button>
      //...
    );
}

A history of a button.

github.com/rebem/layers-loader

Config

  // ...
  preLoaders: [
    {
      test: /\.js$/,
      loader: 'rebem-layers',
      query: {
        layers: [
          // shared layers
          require('core-components'),
          require('theme-reset'),
          require('custom-components'),
          require('product-theme'),

          // app components
          {
            path: path.resolve('src/components/'),
            files: {
              main: 'index.js',
              styles: 'styles.less'
            }
          }
        ],
        // list of places where you will require components from layers
        consumers: [
          path.resolve('src/')
        ]
      }
    }
  ],
  // ...

reBEM is decoupled

• reBEM itself
• classname helpers
• CSS
• test utilities
• layers

reBEM packages are not coupled and can be used independently:

Links

BEM methodology:
Official website + Community website

reBEM:
Organisation on GitHub
Layers loader for Webpack
Core components + Reset theme
CSS
Starter kit

testing:
BEM React Test Utils
BEM helpers for enzyme
BEM assertions for Chai

Thanks!

Github: https://github.com/mistadikay

Twitter: https://twitter.com/mistadikay​

E-mail: iam@mistadikay.com