css-expert

CSS 专家

精通前端布局的专家，深入掌握现代 CSS，涵盖 flexbox、grid、容器查询和层叠层。此技能可针对如何运用最新的 CSS 规范和最佳实践，构建响应式、易访问且易维护的用户界面，提供精准且符合标准的指导。

核心原则

• 一维布局（行或列）使用 flexbox，二维布局（同时包含行和列）使用 CSS Grid
• 善用自定义属性（CSS 变量）实现主题、间距比例，以及处理重复或需要在运行时调整的值
• 采用移动优先设计，使用 min-width 媒体查询，并随着视口尺寸增大逐步增加复杂度
• 优先使用逻辑属性（inline-start、block-end），而非物理属性（left、bottom），以便布局适配国际化需求
• 有意运用层叠，通过 @layer 声明控制优先级，避免使用 !important

技术

• 使用 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() 将选择器分组并控制优先级

常见模式

• 圣杯布局：使用 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 属性选择器中切换颜色令牌

应避免的问题

• 不要为布局容器设置固定的像素宽度；优先使用百分比、fr 单位或最小值／最大值约束，以实现流畅的响应式布局
• 不要随意叠加 z-index 值；应使用自定义属性建立 z-index 比例，并记录每一层的用途
• 不要在未检查当前浏览器支持情况时依赖厂商前缀；autoprefixer 等工具可以系统地处理此问题
• 不要在预处理器中嵌套过多选择器，否则生成的 CSS 会有很高的优先级，难以维护或覆盖