技能檔案

Ub Css

Name: Ub Css
Author: nathan311

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.

nathan3110 星標2026年3月24日

職業
分類: Frontend

技能內容

ub-css — CSS Best Practices

Design Tokens First

/* 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;
}

Cascade Layers (Required in New Projects)

/* 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); }
}

Vue Scoped Styles

相關技能

Ub Css | Skills Pool

<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>

Ub Css

ub-css — CSS Best Practices

Design Tokens First

Cascade Layers (Required in New Projects)

Vue Scoped Styles

Ub Css

ub-css — CSS Best Practices

Design Tokens First

Cascade Layers (Required in New Projects)

Vue Scoped Styles

Progressive Enhancement

Rules

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns