mistadikay

/*
.
└── custom-components/
    └── button
        └── index.js
*/
// js from the last layer, styles from all previous layers
import Button from '#button';
// import Button from 'core-components/button/index.js';
// import from 'theme-reset/styles.less';

mistadikay

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

mistadikay

/*
.
└── 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} />

mistadikay

/* .popup */
:block(popup) {
  
  /* .popup_visible */
  &:mod(visible) {
    
  }
  
  /* .popup__content */
  &:elem(content) {

mistadikay

import {
    renderIntoDocument,
    findRenderedDOMComponentWithBEM,
    isDOMComponent
} from 'rebem-test-utils';
import Popup from '../components/popup';

const tree = renderIntoDocument(<Popup />);
const overlay = findRenderedDOMComponentWithBEM(tree, { block: 'popup', elem: 'overlay' });

mistadikay

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

mistadikay

import React from 'react';

class Popup extends React.Component {
  render() {
    return (
      <div block="popup" mods={{visible: this.props.visible}}>
        <div block="popup" elem="overlay" />
        <div block="popup" elem="content">{this.props.children}</div>
      </div>
    );

mistadikay

import React from 'react';
import { BEM } from 'rebem';

class Popup extends React.Component {
  render() {
    return BEM(
      {
        block: 'popup',
        mods: { visible: this.props.visible }
      },

mistadikay

import Yummies from '@yummies/yummies';

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

mistadikay

import React from 'react';
import b from 'b_';

const block = b.with('popup');

class Popup extends React.Component {
  render() {
    return (
      <div className={b({ visible: this.props.visible })}>
        <div className={b('overlay')}></div>