技能档案

Modern CSS

Flexbox, Grid, CSS Variables, Container Queries, @layer, has()

Frontend Development CSS & Styling

角色数

6

包含此技能的角色

级别数

5

结构化成长路径

必要要求

28

其余 2 个可选

领域

Frontend Development

skills.group

CSS & Styling

最后更新

2026/3/17

如何使用

选择当前级别并对比期望。下方卡片显示晋升所需掌握的内容。

各级别期望

表格展示从初级到首席的技能深度变化。点击行查看详情。

角色 必要性 描述
Desktop Developer (Electron/Tauri) Applies CSS for Electron UI: Flexbox, Grid, CSS variables. Styles desktop elements (titlebar, sidebar). Understands CSS differences in Chromium vs browsers.
Frontend Developer (Angular) 必要 Applies modern CSS in Angular components: Flexbox and Grid for layout, CSS Custom Properties for themes, :host and ::ng-deep (carefully) for styling. Understands ViewEncapsulation modes.
Frontend Developer (React) 必要 Proficient in modern CSS basics for React: flexbox and grid for layouts, CSS custom properties for variables, media queries for responsiveness. Applies CSS Modules or Tailwind CSS for style isolation in components.
Frontend Developer (Svelte) 必要 Uses scoped styles in Svelte components, applies CSS Grid and Flexbox for responsive layouts. Understands cascading in the Svelte context: component styles are isolated, global styles through :global(). Works with CSS variables for theming.
Frontend Developer (Vue) 必要 Applies scoped styles and CSS variables in Vue SFC. Uses Flexbox and Grid for Vue component layouts, understands style cascading and specificity in the context of scoped and deep selectors in Vue.
Fullstack Developer 必要 Applies modern CSS for fullstack application styling: Flexbox and Grid for layouts, CSS variables for theming, media queries for responsiveness. Understands cascade and specificity, builds layouts from designs with pixel-perfect accuracy.
角色 必要性 描述
Desktop Developer (Electron/Tauri) Creates responsive desktop layouts through CSS Container Queries. Implements dark/light theme through CSS variables and prefers-color-scheme. Uses CSS Nesting and @layer. Animates through CSS transitions/animations.
Frontend Developer (Angular) 必要 Uses advanced CSS techniques: Container Queries for responsive components, CSS Layers for specificity management, animations via Angular Animations API, CSS-in-JS through styleUrls and inline styles.
Frontend Developer (React) 必要 Uses advanced CSS capabilities in React components: container queries, :has(), @layer for specificity management, CSS logical properties. Configures CSS Modules with typing through typed-css-modules, animations through Framer Motion.
Frontend Developer (Svelte) 必要 Applies advanced CSS features in Svelte: container queries, has(), nesting, cascade layers (@layer). Creates responsive layouts with dynamic viewport units, uses Svelte transitions and animations with CSS keyframes for smooth UI transitions.
Frontend Developer (Vue) 必要 Creates responsive layouts with Container Queries and CSS Grid in Vue components. Implements animations through CSS Transitions and Vue Transition/TransitionGroup, uses :deep() and :slotted() selectors.
Fullstack Developer 必要 Independently implements complex UI components with modern CSS. Optimizes rendering performance. Writes tests. Applies for state management.
角色 必要性 描述
Desktop Developer (Electron/Tauri) 必要 Designs CSS architecture for desktop (CSS Modules, styled-components, Tailwind). Optimizes CSS performance through contain, will-change. Creates platform-specific styles (Windows/macOS/Linux).
Frontend Developer (Angular) 必要 Designs Angular application CSS architecture: ViewEncapsulation strategy, CSS Custom Properties for dynamic theming, performant animations via will-change and GPU layers, critical CSS for SSR.
Frontend Developer (React) 必要 Designs React application CSS architecture: design token system through CSS custom properties, adaptive typography through clamp(), CLS optimization through aspect-ratio. Ensures CSS strategy compatibility with React Server Components and streaming.
Frontend Developer (Svelte) 必要 Designs CSS architecture for scalable Svelte applications: token methodology, style layers, responsive design strategy. Optimizes Critical CSS for SvelteKit SSR, introduces CSS Houdini API and @property for advanced animations.
Frontend Developer (Vue) 必要 Designs CSS architecture for large-scale Vue applications — CSS Layers for cascade management, custom properties for theming, View Transitions API. Optimizes critical styles through Vite CSS code splitting.
Fullstack Developer 必要 Creates complex CSS solutions for fullstack applications: GPU-accelerated animations, Container Queries for component-level responsiveness, CSS Layers for specificity management. Optimizes critical CSS for SSR pages and resolves FOUC issues.
角色 必要性 描述
Desktop Developer (Electron/Tauri) 必要 Defines CSS strategy for the Electron team. Establishes design tokens and style guidelines. Coordinates CSS architecture.
Frontend Developer (Angular) 必要 Establishes CSS standards for the Angular project: style architecture (BEM vs utility), rules for ::ng-deep and ViewEncapsulation usage, CSS performance budgets, browser support strategy.
Frontend Developer (React) 必要 Standardizes CSS approaches in the team's React projects: methodology selection (Tailwind/Modules), conventions, analysis tools. Introduces automated CSS quality checks: stylelint, visual regression testing, CSS bundle size monitoring.
Frontend Developer (Svelte) 必要 Standardizes CSS practices in the Svelte team: scoped vs global style conventions, naming conventions, architectural patterns. Defines browser support strategy, introduces visual regression testing for Svelte components through Playwright.
Frontend Developer (Vue) 必要 Defines CSS architecture standards for Vue teams — methodologies, tooling, performance budgets for styles. Introduces automated CSS quality checking systems — Stylelint, visual regression through Playwright.
Fullstack Developer 必要 Designs CSS architecture for fullstack applications: CSS-in-JS vs utility-first strategy, critical CSS management with SSR, style loading optimization. Defines styling standards and solves architectural CSS scaling problems for the team.
角色 必要性 描述
Desktop Developer (Electron/Tauri) 必要 Shapes enterprise CSS standards for Electron desktop. Evaluates CSS approaches for desktop. Defines theming strategy.
Frontend Developer (Angular) 必要 Shapes CSS strategy at the Angular platform level: unified design token system, CSS Houdini for custom properties, CSS layers integration with micro-frontend architecture and Angular Elements.
Frontend Developer (React) 必要 Defines long-term CSS strategy for the React ecosystem: token architecture, theming approach, accessibility standards. Evaluates new CSS specifications and their impact on styling architecture, plans migration paths.
Frontend Developer (Svelte) 必要 Shapes CSS strategy at the organizational level, researches Svelte compiler capabilities for style optimization. Influences Svelte ecosystem CSS tooling development, defines direction from utility-first to component-scoped approaches at platform scale.
Frontend Developer (Vue) 必要 Shapes CSS strategy for the organization's Vue ecosystem — evaluation of styling approaches, design token integration, progressive enhancement. Researches and introduces new CSS capabilities — @scope, nesting, scroll-driven animations.
Fullstack Developer 必要 Defines organizational CSS strategy for fullstack projects: unified styling principles, cross-project consistency tooling, CSS performance budgets. Researches new CSS specifications and adopts them in product development.

社区

👁 关注 ✏️ 建议修改 登录以建议修改
📋 提案
暂无提案 Modern CSS
正在加载评论...