cls-bem v1.0.0

cls-bem

BEM class names utility

Usage

Create a block scope

import { bem } from "cls-bem";

const cls = bem("my-block");

Apply block class name

cls(); // my-block

Apply element class name

cls("__element"); // my-block__element

Apply modifier class name

cls("--modifier"); // my-block my-block--modifier

Apply element and modifier class names

cls("__element", "--modifier"); // my-block__element my-block__element--modifier

Example

const cls = bem("user-card");

<div class={cls()}>
  <img class={cls("__avatar")} />
  <span class={cls("__name", isOnline && "--online")}></span>
</div>;

.user-card {
  &__avatar {
  }

  &__name {
    &--online {
    }
  }
}

.user-card {
}

.user-card__avatar {
}

.user-card__name {
}

.user-card__name--online {
}