Bemto-Components

Here is a thing I'm work­ing on at my free time these days:

be­mto-com­po­nents (github repo).

In the last 6 months, I was work­ing mostly with CSS for pro­jects us­ing Re­act and I've tried a few ways of do­ing com­po­nents and styles for them. For styling pur­poses I found out that styled-com­po­nents work the best for me: you write proper CSS there (and not some kinds of JS ob­ject abom­i­na­tions), and every­thing works pretty nice.

How­ever, what I missed is some stuff that I got used to while work­ing with markup in BEM way. With styled-com­po­nents you can es­sen­tially get only re­ally sim­ple and small com­po­nents. If you'd need com­plex in­ter­nal struc­ture, you'd need to do more work with plain Re­act/​JSX, and if you'd need vari­a­tions, then you were left just with ei­ther ex­tend­ing (which is cum­ber­some for when you need mul­ti­ple mod­i­fi­ca­tions), or by us­ing in­ter­po­la­tions with props in­side styled-com­po­nents (which can be­come CSS-in-JS-in-CSS-in-JS rather eas­ily which is un­for­tu­nate and not very read­able).

Af­ter some ex­per­i­ments, I've come up with the pro­ject that I think would solve most of the prob­lems I had with Re­act+styled-com­po­nents and would pro­vide a lot of qual­ity-of-life fea­tures I've missed from the BEM and HTML pre­proces­sors days.

So What Are They?

I won't go to lengths there, as I've al­ready writ­ten a lot of docs, so I'll copy the be­gin­ning there:

Be­mto-com­po­nents are smart com­po­nents for us­ing BEM method­ol­ogy with Re­act. Best used to­gether with styled-com­po­nents.

They provide:

Links above go to the cor­re­spond­ing sec­tions of the docs, and there are too many fea­tures to men­tion in a blog post, so go there ↑, each ex­am­ple there is an in­ter­ac­tive play­ground by the way.

Bemto-button

How­ever, if you'd want to see a more real-life ex­am­ple, there is an­other pro­ject: be­mto-but­ton, it is a foun­da­tion for all the but­tons I use in my markup for more than 4 years, now in a form of a Re­act com­ponent.

The docs for it are in­cor­po­rated into the docs for be­mto-com­po­nents, and there is an in­ter­ac­tive play­ground in all the ex­am­ples as well.

This but­ton com­po­nent is the ex­am­ple of why I made be­mto-com­po­nents: it was re­ally easy to cre­ate, and now it is re­ally easy to use.

Future

All of this is just a start: not all the fea­tures of be­mto-com­po­nents are there in the docs (and those docs prob­a­bly con­tain a lot of ty­pos and over­all bad-writ­ten, as I didn't yet have time to re­view them), but I'm plan­ning to add new fea­tures, write new docs, and cre­ate new com­po­nents sim­i­lar to be­mto-button.

If you're us­ing Re­act and styled-com­po­nents (or, for be­mto-com­po­nents, any­thing else, as they are pretty styling sys­tem ag­nos­tic at the mo­ment), I hope you'll try them and would tell me what do you think.