化繁为简：用算法赋予 CSS 类名简洁而优雅的气息

告别冗长的类名，拥抱代码的可读性

前端开发中，我们常常会使用 CSS 模块来管理样式。这种方法虽然方便，但却容易产生冗长的类名。比如，一个简单的按钮可能会有一个这样的类名：

.btn-primary-large-rounded

这不仅难以记忆，而且会让代码的可读性大大降低。试想一下，当我们想要修改按钮的样式时，需要在堆积如山的类名中大海捞针，这种体验简直糟透了。

算法赋能，简化类名，提升性能

为了解决这个问题，我们可以借助一个巧妙的算法来简化类名。这个算法出自 React-Window 的 demo 页面，后来 Medium 也使用了这个方法。

算法的原理是，对 CSS-Loader 的 getLocalIdent 提供一个定制的函数。这个函数会根据 CSS 模块名称生成一个简短而有序的类名。这样一来，即使是冗长的类名也会变得井然有序，易于记忆和管理。

比如，对于一个名为 "Button" 的 CSS 模块，我们可以使用以下算法来生成类名：

getLocalIdent: (context, localIdentName, localName, options) => {
  const { resourcePath } = context;
  const moduleName = resourcePath.replace(/\\/g, "/").replace(/.*\//, "");
  return `${moduleName}--${localName}`;
},

在这个算法中，我们将 CSS 模块名称和本地名称组合起来，并用两个破折号连接。这样一来，生成的类名既简短又具有语义性。

实践出真知，算法应用实例

现在，让我们来看看这个算法在实际项目中的应用。在我们的项目中，我们使用了一个名为 "react-window" 的库来实现虚拟列表。这个库提供了许多有用的功能，但它默认生成的类名非常冗长。

.ReactVirtualized__Grid__innerScrollContainer

为了简化这些类名，我们将上述算法应用到了项目中。经过一番操作，我们成功地将类名简化为：

.grid-inner-scroll-container

这样一来，类名不仅变得简短，而且更具语义性。

结语：算法赋能，简化 CSS，提升开发体验

通过使用这个算法，我们成功地简化了 CSS 类名，提高了代码的可读性和维护性。这个算法不仅适用于 React-Window，也适用于其他使用 CSS 模块的项目。

如果你也厌倦了冗长的类名，不妨试试这个算法。相信它会让你眼前一亮，让你的编码之旅更加轻松愉快。