Musea 与 CSS 规则

本页集中列出所有相关规则的用途、配置、错误示例和正确示例，无需跳转页面查看对照。高亮行标示修改；复制代码时保留完整源代码。每条规则注明适用范围和当前支持限制；规范示例并不保证当前实现会产生诊断。

规则	示例	用途
`css/no-display-none`	错误示例 · 正确示例	建议使用 v-show 代替 display: none
`css/no-hardcoded-values`	错误示例 · 正确示例	建议使用 CSS 变量代替硬编码值
`css/no-id-selectors`	错误示例 · 正确示例	不建议在 CSS 中使用 ID 选择器
`css/no-important`	错误示例 · 正确示例	不建议在 CSS 中使用 !important
`css/no-utility-classes`	错误示例 · 正确示例	警告在组件样式中实现工具类
`css/no-v-bind-performance`	错误示例 · 正确示例	警告 CSS v-bind() 的性能开销
`css/prefer-logical-properties`	错误示例 · 正确示例	建议使用 CSS 逻辑属性，以更好地支持国际化
`css/prefer-nested-selectors`	错误示例 · 正确示例	建议为后代选择器使用 CSS 嵌套
`css/prefer-slotted`	错误示例 · 正确示例	建议使用 ::v-slotted() 为插槽内容设置样式
`css/require-font-display`	错误示例 · 正确示例	要求 @font-face 规则具有 font-display
`musea/no-empty-variant`	错误示例 · 正确示例	禁止空的 <variant> 块
`musea/prefer-design-tokens`	错误示例 · 正确示例	优先使用设计令牌 CSS 变量，而不是硬编码的原始值
`musea/require-component`	错误示例 · 正确示例	要求 <art> 块具有 component 属性
`musea/require-title`	错误示例 · 正确示例	要求 <art> 块具有 title 属性
`musea/unique-variant-names`	错误示例 · 正确示例	要求 variant 名称唯一
`musea/valid-variant`	错误示例 · 正确示例	要求 <variant> 块具有 name 属性

全部规则 · 规则选项 · ESLint 迁移对应表 · 项目检查 · 组件间属性传递

`css/no-display-none`

建议使用 v-show 代替 display: none

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-display-none": "warn"
      }
    },
  },
});

vp run lint

错误示例

.message 声明通过 CSS 隐藏当前段落，没有使用模板可见性条件。

<template>
  <p class="message">Saved</p>
</template>

<style scoped>
.message {
  display: none;
}
</style>

正确示例

v-show="isSaved" 在当前段落上显式表达可见性条件，并移除 display: none。

<template>
  <p v-show="isSaved" class="message">Saved</p>
</template>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/no-hardcoded-values`

建议使用 CSS 变量代替硬编码值

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-hardcoded-values": "warn"
      }
    },
  },
});

vp run lint

错误示例

按钮将间距数字和十六进制颜色直接写入声明。

<style scoped>
.button {
  padding: 12px 16px;
  color: #174ea6;
}
</style>

正确示例

声明引用具名的间距和颜色自定义属性，使这些值可作为设计令牌维护。

<style scoped>
.button {
  padding: var(--space-3) var(--space-4);
  color: var(--color-action-text);
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/no-id-selectors`

不建议在 CSS 中使用 ID 选择器

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-id-selectors": "warn"
      }
    },
  },
});

vp run lint

错误示例

#submit 将样式规则绑定到 ID 选择器。

<style scoped>
#submit {
  font-weight: 600;
}
</style>

正确示例

.submit 类提供可复用的样式入口，不使用 ID 选择器。

<style scoped>
.submit {
  font-weight: 600;
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/no-important`

不建议在 CSS 中使用 !important

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-important": "warn"
      }
    },
  },
});

vp run lint

错误示例

颜色声明通过 !important 覆盖普通层叠优先级。

<style scoped>
.button {
  color: red !important;
}
</style>

正确示例

颜色来自自定义属性，没有使用 important 声明。

<style scoped>
.button {
  color: var(--button-color);
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/no-utility-classes`

警告在组件样式中实现工具类

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-utility-classes": "warn"
      }
    },
  },
});

vp run lint

错误示例

编写的选择器采用 .flex、.mt-4 和 .text-center 等工具类形式的名称。

<style scoped>
.flex { display: flex; }
.mt-4 { margin-top: 1rem; }
.text-center { text-align: center; }
</style>

正确示例

组件专用的 .my-component 选择器以一个语义名称组织组件样式。

<style scoped>
.my-component { display: flex; margin-top: 1rem; }
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/no-v-bind-performance`

警告 CSS v-bind() 的性能开销

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-v-bind-performance": "warn"
      }
    },
  },
});

vp run lint

错误示例

样式表通过 SFC CSS 的 v-bind() 机制读取变化中的 offset。

<style scoped>
.card {
  transform: translateX(v-bind(offset));
}
</style>

正确示例

元素通过自身的样式绑定直接接收变化中的 transform。

<template>
  <article :style="{ transform: `translateX(${offset}px)` }" class="card" />
</template>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/prefer-logical-properties`

建议使用 CSS 逻辑属性，以更好地支持国际化

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-logical-properties": "warn"
      }
    },
  },
});

vp run lint

错误示例

margin-left 无论书写方向如何，都将外边距固定在物理侧。

<style scoped>
.panel {
  margin-left: 1rem;
}
</style>

正确示例

margin-inline-start 改为跟随行内方向的起始侧。

<style scoped>
.panel {
  margin-inline-start: 1rem;
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/prefer-nested-selectors`

建议为后代选择器使用 CSS 嵌套

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-nested-selectors": "warn"
      }
    },
  },
});

vp run lint

错误示例

.card .title 后代选择器在平铺规则中重复了父选择器。

<style scoped>
.card .title { color: red; }
</style>

正确示例

.title 规则嵌套在 .card 内，将父子样式关系放在一起。

<style scoped>
.card { .title { color: red; } }
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/prefer-slotted`

建议使用 ::v-slotted() 为插槽内容设置样式

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-slotted": "warn"
      }
    },
  },
});

vp run lint

错误示例

scoped 样式表选择的是 slot 出口，而不是通过插槽传入的元素。

<style scoped>
slot { color: red; }
</style>

正确示例

:slotted(.label) 通过作用域插槽选择器选中传入的 label 元素。

<style scoped>
:slotted(.label) { color: red; }
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`css/require-font-display`

要求 @font-face 规则具有 font-display

错误示例 · 正确示例

默认严重程度: warning
预设: opinionated, nuxt
自动修复: 无；请检查建议的修改
适用范围: 纯 CSS 的 style 块（scss、sass、less 和 stylus 块会被跳过）
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/require-font-display": "warn"
      }
    },
  },
});

vp run lint

错误示例

font-face 声明定义了字体来源，却省略了 font-display 策略。

<style>
@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
}
</style>

正确示例

font-display: swap 显式选择先显示后备字体、再切换到目标字体的策略。

<style>
@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-display: swap;
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/no-empty-variant`

禁止空的 <variant> 块

错误示例 · 正确示例

默认严重程度: warning
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/no-empty-variant": "warn"
      }
    },
  },
});

vp run lint

错误示例

名为 primary 的 variant 为空，没有提供预览内容。

<art title="Button" component="./Button.vue">
  <variant name="primary" />
</art>

正确示例

variant 渲染带有 Save 内容的 primary Button。

<art title="Button" component="./Button.vue">
  <variant name="primary">
    <Button tone="primary">Save</Button>
  </variant>
</art>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/prefer-design-tokens`

优先使用设计令牌 CSS 变量，而不是硬编码的原始值

错误示例 · 正确示例

默认严重程度: warning
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 参见类型化选项和默认值。

需要 .art.vue 文件及下方所示的令牌清单。不会从任意颜色推断设计令牌。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/prefer-design-tokens": "warn"
      },
      "ruleOptions": {
        "musea/prefer-design-tokens": {
          "tokens": [
            {
              "path": "color.primary",
              "value": "#3b82f6",
              "tier": "semantic"
            }
          ]
        }
      }
    },
  },
});

vp run lint

错误示例

art 示例使用蓝色字面量，而不是配置的 primary 设计令牌。

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: #3b82f6;
}
</style>

正确示例

样式引用此示例配置的令牌 --color-primary。

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: var(--color-primary);
}
</style>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/require-component`

要求 <art> 块具有 component 属性

错误示例 · 正确示例

默认严重程度: warning
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/require-component": "warn"
      }
    },
  },
});

vp run lint

错误示例

art 块提供了标题，却未标识要预览的组件。

<art title="Button">
  <variant name="primary" />
</art>

正确示例

defineArt 将 ./Button.vue 指定为 art 块的组件。

<script setup>
defineArt("./Button.vue", { title: "Button" });
</script>

<art>
  <variant name="primary" />
</art>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/require-title`

要求 <art> 块具有 title 属性

错误示例 · 正确示例

默认严重程度: error
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/require-title": "error"
      }
    },
  },
});

vp run lint

错误示例

art 块标识了 Button.vue，却没有提供标题。

<art component="./Button.vue">
  <variant name="primary" />
</art>

正确示例

defineArt 选项为 art 块提供 Button 标题。

<script setup>
defineArt("./Button.vue", { title: "Button" });
</script>

<art>
  <variant name="primary" />
</art>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/unique-variant-names`

要求 variant 名称唯一

错误示例 · 正确示例

默认严重程度: error
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/unique-variant-names": "error"
      }
    },
  },
});

vp run lint

错误示例

同一 art 块中的两个 variant 都使用 primary 名称。

<art title="Button" component="./Button.vue">
  <variant name="primary" />
  <variant name="primary" />
</art>

正确示例

两个 variant 分别使用不同的 primary 和 secondary 名称。

<art title="Button" component="./Button.vue">
  <variant name="primary" />
  <variant name="secondary" />
</art>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则

`musea/valid-variant`

要求 <variant> 块具有 name 属性

错误示例 · 正确示例

默认严重程度: error
预设: none
自动修复: 无；请检查建议的修改
适用范围: Musea .art.vue 的 art、variant 和 style 块
选项: 没有规则专属选项。可以配置严重程度和预设。

配置（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/valid-variant": "error"
      }
    },
  },
});

vp run lint

错误示例

variant 省略了标识预览所需的名称。

<art title="Button" component="./Button.vue">
  <variant />
</art>

正确示例

primary 名称标识了该 variant。

<art title="Button" component="./Button.vue">
  <variant name="primary" />
</art>

正确示例在上述配置下不会触发这条规则的诊断；其他规则仍可能报告诊断。

实现 · 全部规则