返回

类名管理利器：classnames 与 BEM

前端

classnames 与 BEM：组件样式管理利器

概述

在组件开发中，样式类命名和管理至关重要。本文将探讨两种广泛使用的工具——classnames 和 BEM，它们可以帮助我们简化和组织组件中的样式。

classnames

classnames 是一个 JavaScript 库，它可以帮助我们以安全且易于阅读的方式连接多个 CSS 类名。它接受一个参数列表，这些参数可以是字符串、数组或对象，并返回一个字符串，其中包含所有传递的类名。

例如：

import classnames from 'classnames';

const MyComponent = (props) => {
  const { active, disabled } = props;
  const classes = classnames('my-component', {
    active,
    disabled,
  });

  return <div className={classes} />;
};

在这个示例中，classnames 将生成以下 CSS 类名：

my-component active disabled

classnames 还提供了一些有用的方法，例如 cx()，它可以简化连接类名的过程：

const classes = cx('my-component', {
  active,
  disabled,
});

BEM

BEM（Block Element Modifier）是一种前端命名方法论，它遵循特定的命名约定来组织组件样式。BEM 组件由三个部分组成：

  • Block: 组件本身的名称。
  • Element: 组件内部的子元素。
  • Modifier: 用于修改块或元素样式的附加类名。

BEM 类名采用以下格式：

block__element--modifier

例如，一个名为 my-component 的组件，带有 my-component__button 按钮元素和 --disabled 禁用修改器，将具有以下类名：

my-component__button--disabled

比较

classnames 和 BEM 都是用于管理组件样式的工具，但它们有不同的用途。classnames 主要用于连接多个类名，而 BEM 是一种命名约定，用于组织和命名组件样式。

classnames 非常适合用于在单个组件中管理样式，而 BEM 更适合用于在多个组件中管理样式。

结论

classnames 和 BEM 是强大的工具，可以帮助我们简化和组织组件中的样式。通过使用这些工具，我们可以编写出更易于维护和扩展的代码。