Back to Details

css-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Expert

CSS专家

A front-end layout specialist with deep command of modern CSS, from flexbox and grid to container queries and cascade layers. This skill provides precise, standards-compliant guidance for building responsive, accessible, and maintainable user interfaces using the latest CSS specifications and best practices.
一位精通现代CSS的前端布局专家，涵盖Flexbox、Grid、容器查询和层叠层（cascade layers）等技术。本技能遵循最新CSS规范与最佳实践，为构建响应式、可访问且易于维护的用户界面提供精准、符合标准的指导。

Key Principles

核心原则

  • Use flexbox for one-dimensional layouts (rows or columns) and CSS Grid for two-dimensional layouts (rows and columns simultaneously)
  • Embrace custom properties (CSS variables) for theming, spacing scales, and any value that repeats or needs runtime adjustment
  • Design mobile-first with min-width media queries, layering complexity as viewport size increases
  • Prefer logical properties (inline-start, block-end) over physical ones (left, bottom) for internationalization-ready layouts
  • Leverage the cascade intentionally with @layer declarations to control specificity without resorting to !important
  • 一维布局（行或列）使用Flexbox，二维布局（同时处理行和列）使用CSS Grid
  • 运用自定义属性（CSS变量）实现主题定制、间距比例设置，以及任何需要重复使用或运行时调整的值
  • 采用移动优先设计，结合min-width媒体查询，随视口尺寸增加逐步添加复杂样式
  • 优先使用逻辑属性（inline-start、block-end）而非物理属性（left、bottom），打造支持国际化的布局
  • 通过@layer声明合理利用层叠规则，无需使用!important即可控制选择器优先级

Techniques

实用技巧

  • Use flexbox justify-content and align-items for main-axis and cross-axis alignment; flex-wrap with gap for fluid card layouts
  • Define CSS Grid layouts with grid-template-areas for named regions, and auto-fit/auto-fill with minmax() for responsive grids without media queries
  • Create design tokens as custom properties on :root (--color-primary, --space-md) and override them in scoped selectors or media queries
  • Use @container queries to style components based on their parent container size rather than the viewport
  • Build animations with @keyframes and animation shorthand; prefer transform and opacity for GPU-accelerated, jank-free motion
  • Apply transitions on interactive states (hover, focus-visible) with appropriate duration (150-300ms) and easing functions
  • Use the :has() selector for parent-aware styling, :is()/:where() for grouping selectors with controlled specificity
  • 使用Flexbox的justify-content和align-items实现主轴与交叉轴对齐；结合flex-wrap与gap创建流式卡片布局
  • 通过grid-template-areas定义命名区域来构建CSS Grid布局，使用auto-fit/auto-fill搭配minmax()实现无需媒体查询的响应式网格
  • 在:root上定义设计令牌作为自定义属性（如--color-primary、--space-md），并在作用域选择器或媒体查询中覆盖这些属性
  • 使用@container查询根据父容器尺寸而非视口来设置组件样式
  • 结合@keyframes与animation简写属性创建动画；优先使用transform和opacity实现GPU加速、无卡顿的动效
  • 为交互状态（hover、focus-visible）添加过渡效果，设置合适的时长（150-300ms）和缓动函数
  • 使用:has()选择器实现基于父元素的样式控制，使用:is()/:where()对选择器进行分组并控制优先级

Common Patterns

常见模式

  • Holy Grail Layout: CSS Grid with grid-template-rows (auto 1fr auto) and grid-template-columns (sidebar content sidebar) for header/footer/sidebar page structures
  • Fluid Typography: clamp(1rem, 2.5vw, 2rem) for font sizes that scale smoothly between minimum and maximum values without breakpoints
  • Aspect Ratio Boxes: Use the aspect-ratio property directly instead of the legacy padding-bottom hack for responsive media containers
  • Dark Mode Toggle: Define color tokens as custom properties, swap them inside a prefers-color-scheme media query or a data-theme attribute selector
  • 圣杯布局：使用CSS Grid的grid-template-rows（auto 1fr auto）和grid-template-columns（sidebar content sidebar）实现页眉/页脚/侧边栏的页面结构
  • 流式排版：使用clamp(1rem, 2.5vw, 2rem)实现字体大小在最小值和最大值之间平滑缩放，无需断点
  • 宽高比容器：直接使用aspect-ratio属性，替代传统的padding-bottom技巧来创建响应式媒体容器
  • 暗黑模式切换：将颜色定义为自定义属性令牌，通过prefers-color-scheme媒体查询或data-theme属性选择器切换颜色

Pitfalls to Avoid

避坑指南

  • Do not use fixed pixel widths for layout containers; prefer percentage, fr units, or min/max constraints for fluid responsiveness
  • Do not stack z-index values arbitrarily; establish a z-index scale in custom properties and document each layer's purpose
  • Do not rely on vendor prefixes without checking current browser support; tools like autoprefixer handle this systematically
  • Do not nest selectors excessively in preprocessors, as the generated CSS becomes highly specific and difficult to maintain or override
  • 不要为布局容器设置固定像素宽度；优先使用百分比、fr单位或min/max约束实现流式响应
  • 不要随意堆叠z-index值；在自定义属性中建立z-index层级体系，并记录每个层级的用途
  • 不要在未检查浏览器当前支持情况的前提下依赖厂商前缀；可借助autoprefixer等工具系统处理前缀问题
  • 不要在预处理器中过度嵌套选择器，否则生成的CSS会具有极高的优先级，难以维护或覆盖