"Bemm: the lightweight JavaScript/TypeScript library for generating BEM class names in your components, without any third-party dependencies."
Bemm is a lightweight JavaScript/TypeScript library that provides a simple and flexible way to generate BEM (Block Element Modifier) class names from within your components. It is designed to be used without any third-party dependencies and can be easily integrated into any JavaScript or TypeScript project that uses npm as a package manager.
With Bemm, you can create BEM class names for your components using a simple and intuitive API. The library provides a set of composable functions that allow you to generate class names for blocks, elements, and modifiers, as well as more advanced features like multiple modifiers and multiple blocks.
Bemm is ideal for web developers who want to use a structured approach to styling and class naming in their projects, without the need for complex CSS frameworks or preprocessors. Whether you are building a small website or a large web application, Bemm can help you keep your code organized and maintainable, while reducing the risk of naming conflicts and other common styling issues.
In this documentation, you will learn how to use Bemm to generate BEM class names for your components, as well as some advanced features and best practices. We hope you find Bemm useful and welcome any feedback or contributions to the project.
npm install bemm
# or yarn
yarn add bemmimport { useBemm } from "bemm";
const bemm = useBemm("block");
render`
<div class="${bemm()}">
<div class="${bemm("inner")}></div>
</div>
`;<div class="block">
<div class="block__inner"></div>
</div>Vue example
<template>
<div :class="bemm()">
<div :class="bemm('child')"></div>
</div>
</template>
<script setup>
const bemm = useBemm("block");
</script>React example
class Example extends React.Component {
const bemm = useBemm('block', {
return: 'string'
});
render() {
return (
<div className={bemm()}>
<div className={bemm("child")}></div>
</div>
);
}
}Multiple functions in once
You can also use the spread method to get the bemm and /docs/useClasses functions in one declration from useBemm, in this way you can use both, with the same block.
import { useBemm } from "bemm";
const { bemm, classes } = useBemm("block");
const mainClasses = classes("", ["something"], "to", { m: "add" });
render`
<div class="${mainClasses}">
<div class="${bemm("inner")}></div>
</div>
`;<div class="block block__something block__to block--add">
<div class="block__inner"></div>
</div>In order to use the function, you have to initiate the function with it's block class.
Create the function an set the the block
const bemm = useBemm("my-block-class");
bemm();
// my-block-class
bemm("lorem");
// my-block-class__lorem
bemm("lorem", "ipsum");
// my-block-class__lorem--ipsumThen you will be able to use the bemm function throughout your html to create the desired classes.
On the initial generateBemm function, there is only one argument, which is the
string for the block.
The create bemm function, or whatever you want to call it, has two arguments:
| Argument | Default | Type |
|---|---|---|
element |
"" |
string | bemmObject |
modifier |
"" |
string | string[] \ { [key:string] : boolean | number } |
show |
true | boolean |
interface bemmObject {
element: string;
modifier: string | string[] | {[key:string]: boolean | number };
show?: boolean;
}import { useBemm } from "bemm";
const bemm = useBemm('app');
bemm() // --> .app
bemm('container') // --> .app__container
bemm('container','red') // --> .app__container--redYou can use the Bemm function more advanced with different values to either create sets or make values show or not based on other variables.
import { useBemm } from "bemm";
const bemm = useBemm('app');
const isRed = false;
const hasBorder = true;
const isLarge = true;
const isDarkmode = false;
// With boolean values
bemm('container',{
red: isRed,
bordered: hasBorder,
large: isLarge,
darkmode: isDarkmode
}) // --> ['.app__container--bordered', '.app__container--large']
// With boolean values, but either/or
bemm('container',{
'red|blue': isRed,
'bordered|simple': hasBorder,
'large|small': isLarge,
'darkmode|lightmode': isDarkmode
}) // --> ['.app__container--blue', '.app__container--bordered', '.app__container--large','.app__container--lightmode']
// Or you can give a series of values and base the value on a number
bemm('container',{
'red|blue|yellow': 2,
'active|inactive': 0,
'small|medium|large': 1,
'something|else': 5
}) // --> ['.app__container--yellow','.app__container--active','.app__container__medium', '.app__container']
// Notice how the last value returns the basic element, this is because the 5th element in the array is not found and therefore null is returns, this results in returning a value without modifier. [gist=2d9aff65094156a9f52f67594e8000d0]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent