怎样用Stylelint禁止项目中使用不规范的CSS内联样式-css教程-PHP中文网

Stylelint 不检查 HTML 中的 style 属性，因其基于 PostCSS 解析 CSS 字符串，而 style 是 HTML 属性值，非 CSS 文件内容；PostCSS 不解析 HTML，故 Stylelint 默认不可见，需借助 ESLint 及对应插件（如 eslint-plugin-react 的 react/no-inline-styles）在模板层拦截。

怎样用stylelint禁止项目中使用不规范的css内联样式

Stylelint 本身不检查 HTML 中的 style 属性，它只处理 CSS、SCSS、Less 等样式文件。想禁止不规范的内联样式，必须借助其他工具配合，不能单靠 Stylelint。

为什么 `style` 属性不在 Stylelint 的检测范围内

Stylelint 基于 PostCSS 解析器工作，输入是 CSS 源码字符串，而 HTML 中的 style="color: red" 是 HTML 属性值，不属于 CSS 文件内容。PostCSS 不解析 HTML，因此 Stylelint 根本看不到它。

即使你把 style 属性写在 .html 或 .vue 文件里，Stylelint 默认也不会读取这些文件（除非你显式配置 files 匹配并启用 HTML 解析器插件）
stylelint-config-standard 或官方内置规则中，没有任何一条能命中 HTML 内联样式
试图用 /* stylelint-disable-line */ 注释 HTML 的 style 属性——完全无效，因为那不是 Stylelint 的解析上下文

真正可行的替代方案：用 ESLint + 插件拦截

内联样式本质是 HTML/JSX 属性，应由 ESLint 在模板或组件层面拦截。推荐组合：

对 .html 文件：使用 eslint-plugin-html + 自定义规则，匹配 style 属性值并调用 CSS 解析器校验
对 .vue 文件：启用 eslint-plugin-vue 的 vue/no-unused-vars 等规则还不够，需配合 vue/max-attributes-per-line 限制行内复杂度，再加自定义规则提取 style 值
对 .jsx/.tsx：用 eslint-plugin-react 的 react/no-inline-styles 直接禁止——这是最成熟、开箱即用的方式

示例（React 项目）：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

"rules": {
  "react/no-inline-styles": "error"
}

它会报错

 这类写法，且支持 allowList 白名单绕过关键场景。如果坚持要在 CSS 层做“补救”，只能退守到防御性策略
无法禁用内联样式，但可以降低其危害性：

在 CSS 文件中启用 !important 限制："declaration-no-important": true，防止内联样式用 !important 覆盖全局规则
禁用高风险单位："declaration-property-unit-disallowed-list": { "all": ["px"] }（慎用），让内联样式即使写了 px 也过不了 lint
用 property-no-unknown + value-no-unknown 确保所有内联样式属性和值都是合法的——前提是内联样式值被当作 CSS 字符串传给 Stylelint（需构建时提取并喂给 Stylelint，工程成本高）

这类做法属于“事后防御”，不是真正的禁止，且容易漏检。真实项目中，95% 的内联样式问题都应在模板层用 ESLint 拦住。
最容易被忽略的一点：团队常以为开了 stylelint-config-recommended 就万事大吉，其实它对 HTML 内联样式完全无感。真正起效的永远是“在哪一层写，就在哪一层拦”。