Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

cssmem

1.2.4 • Public • Published

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.

Install

npm i --save-dev cssmem

Usage

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

More plausible example

// components/MyButton/MyButton.css
.button {
  border: 1px solid #000;
 
  &_wide {
    width: 100%;
  }
 
  &_size {
    &_s {
      height: 28px;
    }
    &_{
      height: 36px;
    }
  }
}
// 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 (
    <div className={button({ wide, size })} onClick={onClick}>
      {text}
    </div>
  );
};
 
export default MyButton;

Mixes

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

const MyButton = ({
  onClick,
  text,
  wide,
  size,
  className,
}) => {
  return (
    <div className={button({ wide, size }, className)} onClick={onClick}>
      {text}
    </div>
  );
};

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

Install

npm i cssmem

DownloadsWeekly Downloads

67

Version

1.2.4

License

MIT

Unpacked Size

4.71 kB

Total Files

5

Last publish

Collaborators

  • avatar