Vize

Musea and CSS rules

Follow each rule for purpose, severity, scope, configuration, and Bad/Good examples. The complete catalogue keeps all examples and current support boundaries on one page.

Configure lint.vize.rules and run vp run lint with the Vite+ helper. Check each page for type-aware, filename, or additional-configuration prerequisites.

Rule Examples Purpose
css/no-display-none Bad · Good Suggest using v-show instead of display: none
css/no-hardcoded-values Bad · Good Suggest using CSS variables instead of hardcoded values
css/no-id-selectors Bad · Good Discourage use of ID selectors in CSS
css/no-important Bad · Good Discourage use of !important in CSS
css/no-utility-classes Bad · Good Warn against implementing utility classes in component styles
css/no-v-bind-performance Bad · Good Warn about performance cost of CSS v-bind()
css/prefer-logical-properties Bad · Good Recommend CSS logical properties for better i18n support
css/prefer-nested-selectors Bad · Good Recommend using CSS nesting for descendant selectors
css/prefer-slotted Bad · Good Recommend ::v-slotted() for styling slot content
css/require-font-display Bad · Good Require font-display in @font-face rules
musea/no-empty-variant Bad · Good Disallow empty <variant> blocks
musea/prefer-design-tokens Bad · Good Prefer design token CSS variables over hardcoded primitive values
musea/require-component Bad · Good Require component attribute in <art> block
musea/require-title Bad · Good Require title attribute in <art> block
musea/unique-variant-names Bad · Good Require unique variant names
musea/valid-variant Bad · Good Require name attribute in <variant> blocks

All rules · Rule Options · ESLint migration map · Project checks