Introduction of the useBem hook for React

The useBem hook is a powerful utility for managing CSS classes in a predictable and maintainable manner.

It leverages the BEM (Block Element Modifier) methodology, which is a popular naming convention for classes in HTML and CSS.

BEM aims to create reusable components and code sharing in front-end development by following a specific pattern:

• Block: The outermost parent container, representing a distinct component (e.g., card).
• Element: A part of the block that performs a particular function (e.g., card__body).
• Modifier: A flag on a block or element to change its appearance or behavior (e.g., card--primary).

Installation

To use the useBem hook, you need to install it from the @stewed/hooks package.

1npm install @stewed/hooks

This guide provides clear examples and explains the benefits of using useBem for blocks, elements, and modifiers.

Let's explore the useBem hook through examples and understand its benefits.

Example 1: Block with modifiers and extra classes

In this example, we use the getBlock function provided by the useBem hook to generate CSS classes for a block.

1const { getBlock } = useBem({ block: "card" });
2
3const cssClasses = {
4  root: getBlock({ modifiers: ["mod"], extraClasses: "extra" }),
5};
6
7console.log(cssClasses.root); // Output: "card card--mod extra"

Explanation

• getBlock({ modifiers: ["mod"], extraClasses: "extra" }): This function generates the block's base class (card), appends the modifier (card--mod), and includes any extra classes (extra).

Benefits

1. Consistency: Ensures a consistent naming convention for CSS classes.
2. Readability: Improves readability by clearly defining the block, its modifiers, and any additional classes.
3. Maintainability: Simplifies maintenance by centralizing the class generation logic.

Example 2: Elements within a block

This example demonstrates how to generate CSS classes for elements within a block using the getElement function.

1const { getElement } = useBem({ block: "card" });
2
3const cssClasses = {
4  body: getElement(["body"]),
5};
6
7console.log(cssClasses.body); // Output: "card__body"

Explanation

• getElement(["body"]): Generates the class for the body element within the card block (card__body).

Benefits

1. Clear Hierarchy: Establishes a clear hierarchy between blocks and elements.
2. Scalability: Makes it easy to add more elements to the block without confusion.
3. Encapsulation: Encapsulates element-specific styles within their respective blocks.

Example 3: Modifiers for elements

In this example, we use the getModifier function to generate CSS classes for modifiers on a block or element.

1const { getModifier } = useBem({ block: "card" });
2
3const cssClasses = {
4  primary: getModifier(["primary"]),
5};
6
7console.log(cssClasses.primary); // Output: "card--primary"

Explanation

• getModifier(["primary"]): Generate` the class for the primary modifier within the card block (card--primary).

Benefits

• Flexibility: Allows flexible application of modifiers to blocks or elements.
• Modular Styling: Facilitates modular styling by clearly distinguishing between base styles and modifiers.
• Reusability: Enhances reusability by enabling modifiers to be easily applied across different components.

Example 4: Combining BEM and CSS modules

This example shows how to use useBem with CSS Modules to ensure that classes are only applied if they exist in the stylesheet.

1// Styles
2import styles from "./Card.module.css";
3
4const { getBlock, getElement, getModifier } = useBem({ block: "card", styles });
5
6const cssClasses = {
7  root: getBlock({ modifiers: ["mod"], extraClasses: "extra" }),
8  body: getElement(["body"]),
9  footer: getElement(["footer"]),
10  primary: getModifier(["primary"]),
11};

Explanation

• getBlock, getElement, getModifier: These functions generate the respective BEM classes and check if they exist in the CSS module (styles).

Benefits

• Type Safety: Ensures that only existing classes are applied, reducing runtime errors.
• Integration with CSS Modules: Seamlessly integrates BEM methodology with CSS Modules for scoped and maintainable styles.
• Efficient Styling: Combines the advantages of BEM and CSS Modules to provide a robust styling solution.

Example 5: Conditional modifiers

This example shows how useBem can handle conditional modifiers based on props.

1import React from "react";
2// Hooks
3import { useBem } from "@stewed/hooks";
4// Styles
5import styles from "./Button.module.css";
6
7interface IButtonProps {
8  skin?: "primary" | "secondary";
9  className?: string;
10  disabled?: boolean;
11  children?: React.ReactNode;
12}
13
14export function Button({ skin, className, children }: IButtonProps): React.ReactElement {
15  const { getBlock } = useBem({ block: "button", styles });
16
17  const cssClasses = {
18    root: getBlock({ modifiers: [skin, disabled && "disabled"], extraClasses: className }),
19  };
20
21  return <button className={cssClasses.root}>{children}</button>;
22}

1<Button />; // Output: "button"
2<Button skin="primary" />; // Output: "button button--primary"
3<Button skin="secondary" />; // Output: "button button--secondary"
4<Button disabled />; // Output: "button button--disabled"
5<Button className="extra " />; // Output: "button extra"

Explanation

• getBlock({ modifiers: [skin, disabled && "disabled"], extraClasses: className }): Generates the base class (button), appends the modifier if skin is defined (button--primary or button--secondary or button--disabled), and includes any extra classes.

Benefits

1. Conditional Styling: Allows conditional application of modifiers based on props.
2. Dynamic Classes: Dynamically generates classes based on component state or props.
3. Reusability: Enhances reusability and flexibility by adapting to different states or props.

Conclusion

The useBem hook is a highly beneficial tool for front-end developers, offering a structured and scalable way to manage CSS classes. By adhering to the BEM methodology, it promotes consistency, readability, and maintainability in your codebase.

Whether you are dealing with blocks, elements, or modifiers, the useBem hook provides a clear and efficient approach to styling your components.