CSS rules
Plain CSS in <style> blocks, including correctness and maintainability checks.
Each rule page shows a failing example, a passing example, and the configuration that turns the rule on.
Stricter presets (10)
Only in opinionated, nuxt or ecosystem. The Presets column lists which.
| Rule | What it checks | Presets | Auto-fix |
|---|---|---|---|
css/no-display-none |
Suggest using v-show instead of display: none. | opinionated, nuxt |
|
css/no-hardcoded-values |
Suggest using CSS variables instead of hardcoded values. | opinionated, nuxt |
|
css/no-id-selectors |
Discourage use of ID selectors in CSS. | opinionated, nuxt |
|
css/no-important |
Discourage use of !important in CSS. | opinionated, nuxt |
|
css/no-utility-classes |
Warn against implementing utility classes in component styles. | opinionated, nuxt |
|
css/no-v-bind-performance |
Warn about performance cost of CSS v-bind(). | opinionated, nuxt |
|
css/prefer-logical-properties |
Recommend CSS logical properties for better i18n support. | opinionated, nuxt |
|
css/prefer-nested-selectors |
Recommend using CSS nesting for descendant selectors. | opinionated, nuxt |
|
css/prefer-slotted |
Recommend ::v-slotted() for styling slot content. | opinionated, nuxt |
|
css/require-font-display |
Require font-display in @font-face rules. | opinionated, nuxt |