bemed components

BEM-flavored React Components.

styled-components is great! It allows to write clean JSX code. But sometimes you want to keep CSS in CSS.

BEM is fabulous and time-tested but working directly with its classnames in markup is not a pleasure.

bemed components allows to write expressive and clean JSX code. Its just creates an shortcutted Components with BEM classnames inside.

Install

npm install bemed-components

Usage

Prepares: import, create Block context

import bemed from 'bemed-components'

const b = bemed('home')   

Declare Blocks

const Home = b()           

Declare Elements

const Roof = b('roof', { mod: ['color']}) 
const Door = b('door', { mod: ['opened']})
const Windows = b('windows')   
const Window = b.span('window', { mod: ['large']}) 

Write clean and expressive JSX

const BemedComponent = ({opened}) => (
 <Home>
   <Roof color='red'/>     
   <Windows>
     <Window large> + </Window>
     <Window> + </Window>
   </Windows>
   <Door opened={opened}/>
 </Home>
)

That will be compiled to

const BemedComponent = ({opened}) => (
  <div class="home">
    <div class="home__roof home__roof_color_red"> 
    <div class="home__windows">
      <span class="home__window home__window_large"> + </span>  
      <span class="home__window"> + </span>
    </div>
    <div class={`home__door ${ opened ? 'home__door_opened' : '' }`}></div>
  </div>
)

---

With gratitude and great respect for BEM and styled-components