Avoid using element selectors (e.g., `button {... }`) directly within `<style scoped>`. Prefer class selectors.
When using `scoped`, Vue adds a unique data attribute selector (e.g., `[data-v-xxxxxxx]`) to each rule. Element selectors combined with attribute selectors (e.g., `button[data-v-xxxxxxx]`) can be significantly less performant in browsers compared to class selectors combined with attribute selectors (e.g., `.my-button[data-v-xxxxxxx]`). Using classes improves CSS performance.
Side-by-side examples engineers can pattern-match during review.
<template>
<button>×</button>
</template>
<style scoped>
/* BAD: Element selector in scoped style */
button {
background-color: red;
}
</style><template>
<button class="btn-close">×</button>
</template>
<style scoped>
/* GOOD: Class selector in scoped style */
.btn-close {
background-color: red;
}
</style><style scoped>
button { /* Noncompliant: Element selector */
background-color: red;
}
</style><style scoped>
.btn-close { /* Compliant: Class selector */
background-color: red;
}
</style>From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.