Plain CSS and Vue/Nuxt style blocks best practices. Use when writing CSS, working with design tokens, cascade layers, container queries, or Vue scoped styles. Auto-activates on .css files or <style> blocks in .vue files.
/* Always define tokens before using values */
:root {
--color-primary: #2563eb;
--color-surface: #ffffff;
--color-text: #0f172a;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--font-sans: "Inter", system-ui, sans-serif;
}
/* Declare layer order at the top of your root stylesheet */
@layer reset, base, tokens, components, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; margin: 0; }
}
@layer components {
.card { padding: var(--space-md); border-radius: var(--radius-md); }
}
<style scoped>
/* Scoped = styles only apply to this component */
.button {
background-color: var(--color-primary);
padding: var(--space-sm) var(--space-md);
}
/* Use :deep() to target child components */
.wrapper :deep(.child-element) {
color: var(--color-text);
}
</style>
@supports for newer features with fallbacksclamp() for fluid typography: font-size: clamp(1rem, 2.5vw, 1.5rem)gap over margin hacks for spacing in flex/grid!important — fix specificity insteadprefers-color-scheme is supported