在进行前端开发过程中，我们常常需要使用 CSS 对页面进行样式布局。然而，由于 CSS 的灵活性较大，也意味着我们需要更加严格地规范我们的代码，以保证整个页面的样式风格统一且易于维护。这就是 CSS 代码规范的必要性所在。
而在 CSS 代码规范的实现过程中，我们发现 lint 工具的使用是不可少的步骤。在这篇文章中，我们将主要介绍一个 npm 包 stylelint-selector-tag-no-without-class，简单介绍其原理和使用方法，帮助我们更加严格地标准化 CSS 代码。
stylelint-selector-tag-no-without-class 简介
stylelint-selector-tag-no-without-class 是一个基于 stylelint 而开发的插件。通过对 HTML 标签进行分析，检测 CSS 中是否存在未添加类名的标签，从而避免出现过于宽泛的样式（如 p {}）而使页面样式失去可读性和可维护性。
安装
在安装 stylelint-selector-tag-no-without-class 之前，你必须确保你已经安装了 stylelint 全局包。如果没有安装，你可以通过以下命令进行安装：
npm install -g stylelint
接下来，你只需要在你的项目根目录使用以下命令进行安装：
npm install stylelint-selector-tag-no-without-class --save-dev
使用
使用 stylelint-selector-tag-no-without-class 时，你需要配置你的 stylelint 配置文件，并在其中添加 “plugin” 和 “rules” 字段：
{
"plugins": [
"stylelint-selector-tag-no-without-class"
],
"rules": {
"plugin/selector-tag-no-without-class": true
}
}其中， "plugin/selector-tag-no-without-class" 表示要使用的规则名称； true 表示开启规则检查。
配置文件中需要注意的一点是，你需要添加 "plugin:" 前缀，将自定义的 rules 指向 plugin 下。
示例
下面是一个简单的示例代码，用于演示 stylelint-selector-tag-no-without-class 的使用：
-- -------------------- ---- ------- -- --- -- - - ----------- ----- - --- - ----------- -------- - -- ---- -- ------------- - - ----------- ----- - ------------- --- - ----------- -------- -
通过以上的 example 中，可以看出 stylelint-selector-tag-no-without-class 能够有效避免在 Css 中出现未添加类名选择器而带来的样式问题，提高页面代码规范性和可读性。
总结
通过本文的介绍，我们了解了 stylelint-selector-tag-no-without-class 的使用方法以及其在 CSS 代码规范中的作用。当然，除了 stylelint-selector-tag-no-without-class，还有很多其他更加实用的 lint 工具，适用于不同场景下的 CSS 代码规范约束。希望这篇文章能对大家学习 CSS 代码规范有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f408efcdbf7be33b2567219