如何将 CSS 类标记为已弃用

Question

有没有一种（好的）方法将 CSS 类标记为已弃用？

这个想法是在重构过程中，当您创建新的干净类，但想要逐渐更新您的站点时，因此您必须保留新旧类一段时间，但您希望其他人仅使用新类来实现新功能.

类定义中的注释是第一步，但仅在您实际检查类实现时才有帮助，而当类用法只是从其他地方复制时则没有帮助。

我正在寻找的是在 IDE 中显示的东西，或者 linter 可能会抛出警告的东西

Answer 1

重构 CSS 时，重要的是要确保新功能使用更新的类，同时逐步淘汰旧的类。如果您使用 JSX 或 TSX，请不要依赖注释，而是使用像 eslint-plugin-deprecate-classnames 这样的 linter 来确保您的代码是安全的：

安装 ESLint：

npm install eslint --save-dev

安装

eslint-plugin-deprecate-classnames

：

npm install eslint-plugin-deprecate-classnames --save-dev

配置 ESLint：

将 deprecate-classnames 添加到

.eslintrc

文件的插件部分：

{
    "plugins": [
        "deprecate-classnames"
    ]
}

为已弃用的类添加规则：

{
    "rules": {
        "deprecate-classnames/classnames": ["error",
            { "name": "old-class", "use": "new-class" }
        ]
    }
}

此配置将标记旧类的任何使用，并建议使用新类。

清理未使用的 CSS 开始使用新类后，请使用 Chrome DevTools Coverage 工具来识别并删除未使用的 CSS。

通过使用 eslint-plugin-deprecate-classnames 以及 Chrome DevTools 覆盖工具，您可以顺利过渡到新类并维护干净的代码库。

Answer 2

您可以简单地向旧类添加注释（例如：/*重复，创建新类*/，以便您知道在创建新类后要删除哪些内容。

Answer 3

您可以将消息放入 CSS 规则集中，如下所示：

.center {
  text-align: "center";
  --deprecated: "WARNING: Use .other-class instead";
}

这样开发者和用户就可以直接在浏览器中查看消息并采取行动