Skip to content

gwer/cssmem

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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;
    }
    &_m {
      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.

Configuration

If you need custom delimiters, you can change defaults:

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •