getClassName

A utility for generating BEM-style class names with support for CSS modules, modifiers, and child elements.

A powerful utility for generating BEM (Block Element Modifier) style class names with built-in support for CSS modules, conditional modifiers, and child element naming.

Features

• BEM Convention: Automatically generates proper BEM-style class names
• CSS Modules Support: Works seamlessly with CSS/SCSS modules and styled components
• Conditional Modifiers: Apply modifiers based on boolean conditions
• Child Element Helper: Generate consistent child element class names
• TypeScript Support: Fully typed with comprehensive interfaces

Basic Usage

With Modifiers

With Custom className

With CSS Modules

React Component Example

CSS Example

1/* Button.module.css */
2.button {
3  display: inline-flex;
4  align-items: center;
5  padding: 8px 16px;
6  border: none;
7  border-radius: 4px;
8  cursor: pointer;
9  transition: all 0.2s ease;
10}
11
12.button--primary {
13  background-color: #007bff;
14  color: white;
15}
16
17.button--secondary {
18  background-color: #6c757d;
19  color: white;
20}
21
22.button--small {
23  padding: 4px 8px;
24  font-size: 12px;
25}
26
27.button--large {
28  padding: 12px 24px;
29  font-size: 18px;
30}
31
32.button--disabled {
33  opacity: 0.5;
34  cursor: not-allowed;
35}
36
37.button__text {
38  font-weight: 500;
39}

API Reference

getClassName(props)

Parameters

Returns

Returns a tuple [rootClass, getChildClass]:

• rootClass (string): The computed root class name with all modifiers and custom classes
• getChildClass (function): Function that takes a child element name and returns the BEM child class

getChildClass(childClassName)

Parameters

Returns

• string: The computed BEM child class name (e.g., block__element)

Best Practices

Consistent Naming Convention

Organize Modifiers Logically

Use with CSS Custom Properties

1.button {
2  --button-color: #007bff;
3  --button-padding: 8px 16px;
4
5  background-color: var(--button-color);
6  padding: var(--button-padding);
7}
8
9.button--large {
10  --button-padding: 12px 24px;
11}

Common Patterns

Conditional Styling

Complex Component Structure