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
const b =
Declare Blocks
const Home =
Declare Elements
const Roof = const Door = const Windows = const Window = b
Write clean and expressive JSX
const BemedComponent = opened <Home> <Roof ='red'/> <Windows> <Window > + </Window> <Window> + </Window> </Windows> <Door =/> </Home>
That will be compiled to
const BemedComponent = opened <div ="home"> <div ="home__roof home__roof_color_red"> <div ="home__windows"> <span ="home__window home__window_large"> + </span> <span ="home__window"> + </span> </div> <div =></div> </div>
With gratitude and great respect for BEM and styled-components