CSSMEM (CSS Module, Element, Modifier)

CSSMEM is like BEM but with CSS Module instead of Block.

It works like classnames/bind but with CSSMEM methodology.

$3

``
npm i --save-dev cssmem
`

$3

`js
import cssmem from 'cssmem';

const styles = {
foo: 'abc',
foo_bar: 'def',
foo_baz_qwe: 'ghi',
};

const em = cssmem(styles);
const foo = em('foo');

foo(); // abc
foo({ bar: true }); //abc def
foo({ baz: 'qwe' }); //abc ghi
foo({ bar: true, baz: 'qwe' }); //abc def ghi
`

$3


`css
// components/MyButton/MyButton.css
.button {
border: 1px solid #000;

&_wide {
width: 100%;
}

&_size {
&_s {
height: 28px;
}
&_m {
height: 36px;
}
}
}
`

`js
// components/MyButton/index.js
import React from 'react';
import cssmem from 'cssmem';
import styles from 'MyButton.css';

const em = cssmem(styles);
const button = em('button');

const MyButton = ({
onClick,
text,
wide,
size,
}) => {
return (


);
};

export default MyButton;
`

$3

You can mix other classnames by passing second argument to last call (after modifiers).

`js
const MyButton = ({
onClick,
text,
wide,
size,
className,
}) => {
return (



);
};
`

If you don't need modifiers you can skip it with {} or null.

$3

If you need custom delimiters, you can change defaults:

`js
// Somewhere in the root of your app
cssmem.config.elemDelimiter = '--'; // Default is '_'
cssmem.config.modDelimiter = '-'; // Default is '_' too
``