css

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Expert CSS Development

专家级CSS开发

Write modern, performant, maintainable CSS following current best practices with deep knowledge of browser compatibility and CSS specifications.

遵循当前最佳实践，编写现代、高性能、可维护的CSS，深入了解浏览器兼容性与CSS规范。

Documentation Lookup with context7

使用context7查阅文档

IMPORTANT: When you need to look up CSS properties, syntax, browser compatibility, or spec details, use the context7 MCP tool to query MDN and other documentation sources.

重要提示：当你需要查阅CSS属性、语法、浏览器兼容性或规范细节时，请使用context7 MCP工具查询MDN及其他文档来源。

How to use context7 for CSS

如何使用context7处理CSS

bash

undefined

bash

undefined

Look up CSS properties

查阅CSS属性

context7 "CSS flexbox properties" context7 "CSS grid-template-areas syntax" context7 "CSS custom properties inheritance"

Check browser compatibility

检查浏览器兼容性

context7 "CSS container queries browser support" context7 "CSS :has() selector compatibility"

Find best practices

查找最佳实践

context7 "CSS performance optimization" context7 "CSS naming conventions BEM"

Explore modern features

探索现代特性

context7 "CSS cascade layers @layer" context7 "CSS subgrid" context7 "CSS color-mix function"


**Use context7 whenever**:
- You're unsure about exact syntax or property values
- You need to verify browser support for a feature
- You want to find the most current best practices
- You're working with cutting-edge CSS features
- You need to understand spec details or edge cases

context7 "CSS cascade layers @layer" context7 "CSS subgrid" context7 "CSS color-mix function"


**在以下情况务必使用context7**:
- 你不确定确切的语法或属性值时
- 需要验证某个特性的浏览器支持情况时
- 想要找到最新的最佳实践时
- 处理前沿CSS特性时
- 需要理解规范细节或边缘情况时

Core Principles

核心原则

Mobile-first responsive design - Start with mobile layout, scale up
Progressive enhancement - Core functionality works everywhere, enhancements where supported
CSS cascade and specificity - Understand and leverage, don't fight against it
Performance matters - Minimize reflows, optimize animations, reduce file size
Maintainability - Use consistent naming, logical organization, clear documentation

移动端优先的响应式设计 - 从移动端布局开始，逐步适配更大屏幕
渐进式增强 - 核心功能在所有环境中可用，在支持的环境中添加增强效果
CSS层叠与优先级 - 理解并合理利用，而非对抗它们
性能至关重要 - 最小化重排，优化动画，减小文件体积
可维护性 - 使用一致的命名、逻辑化的组织、清晰的文档

Modern Layout Techniques

现代布局技术

Flexbox for One-Dimensional Layouts

Flexbox：一维布局

css

/* Common flex patterns */
.container {
  display: flex;
  gap: 1rem; /* Prefer gap over margins for spacing */
}

/* Center content */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive flex wrapping */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-wrap > * {
  flex: 1 1 300px; /* Grow, shrink, basis */
}

/* Common flex utilities */
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-auto { flex: auto; }

css

/* 常见flex模式 */
.container {
  display: flex;
  gap: 1rem; /* 优先使用gap而非margin进行间距控制 */
}

/* 居中内容 */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 响应式flex换行 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-wrap > * {
  flex: 1 1 300px; /* 放大比例，缩小比例，基础尺寸 */
}

/* 常用flex工具类 */
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-auto { flex: auto; }

Grid for Two-Dimensional Layouts

Grid：二维布局

css

/* Responsive grid with auto-fit */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Named grid areas for semantic layouts */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Dense packing for masonry-like layouts */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

css

/* 带auto-fit的响应式网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* 用于语义化布局的命名网格区域 */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* 用于瀑布流布局的密集排列 */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

Container Queries (Modern Alternative to Media Queries)

容器查询（媒体查询的现代替代方案）

css

/* Container query setup */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Query the container, not the viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

css

/* 容器查询设置 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 查询容器而非视口 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Modern CSS Features

现代CSS特性

Custom Properties (CSS Variables)

自定义属性（CSS变量）

css

:root {
  /* Color system */
  --color-primary: #0066cc;
  --color-primary-dark: #004499;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  
  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Dark mode using data attribute */
  --bg: var(--color-surface);
  --fg: var(--color-text);
}

[data-theme="dark"] {
  --color-surface: #1a1a1a;
  --color-text: #e5e5e5;
}

/* Using custom properties */
.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
}

css

:root {
  /* 颜色系统 */
  --color-primary: #0066cc;
  --color-primary-dark: #004499;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  
  /* 间距刻度 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* 排版 */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* 使用data属性实现暗黑模式 */
  --bg: var(--color-surface);
  --fg: var(--color-text);
}

[data-theme="dark"] {
  --color-surface: #1a1a1a;
  --color-text: #e5e5e5;
}

/* 使用自定义属性 */
.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
}

Cascade Layers (@layer)

层叠层（@layer）

css

/* Define layer order - lowest specificity first */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

css

/* 定义层顺序 - 优先级从低到高 */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

Modern Selectors

现代选择器

css

/* :is() for grouping (no specificity increase) */
:is(h1, h2, h3) {
  font-weight: 700;
  line-height: 1.2;
}

/* :where() for zero specificity */
:where(.card, .panel) > :where(h2, h3) {
  margin-top: 0;
}

/* :has() for parent selection */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.form:has(:invalid) .submit-button {
  opacity: 0.5;
  pointer-events: none;
}

/* Logical properties for internationalization */
.element {
  margin-inline-start: 1rem; /* Instead of margin-left */
  padding-block: 2rem; /* Instead of padding-top and padding-bottom */
  border-inline-end: 1px solid; /* Instead of border-right */
}

css

/* :is()用于分组（不会提升优先级） */
:is(h1, h2, h3) {
  font-weight: 700;
  line-height: 1.2;
}

/* :where()优先级为0 */
:where(.card, .panel) > :where(h2, h3) {
  margin-top: 0;
}

/* :has()用于父元素选择 */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.form:has(:invalid) .submit-button {
  opacity: 0.5;
  pointer-events: none;
}

/* 用于国际化的逻辑属性 */
.element {
  margin-inline-start: 1rem; /* 替代margin-left */
  padding-block: 2rem; /* 替代padding-top和padding-bottom */
  border-inline-end: 1px solid; /* 替代border-right */
}

Animations and Transitions

动画与过渡

Performant Animations

高性能动画

css

/* Only animate transform and opacity for 60fps */
.smooth-animation {
  /* Hint to browser for optimization */
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-animation:hover {
  transform: translateY(-4px);
}

/* Remove will-change after animation */
.smooth-animation:not(:hover) {
  will-change: auto;
}

/* Complex keyframe animations */
@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: slideInFade 0.4s ease-out;
}

css

/* 仅对transform和opacity进行动画以保证60fps */
.smooth-animation {
  /* 提示浏览器进行优化 */
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-animation:hover {
  transform: translateY(-4px);
}

/* 动画结束后移除will-change */
.smooth-animation:not(:hover) {
  will-change: auto;
}

/* 复杂关键帧动画 */
@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: slideInFade 0.4s ease-out;
}

View Transitions API

视图过渡API

css

/* Smooth page transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* Named transitions for specific elements */
.hero {
  view-transition-name: hero-image;
}

::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 0.5s;
}

css

/* 平滑页面过渡 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* 针对特定元素的命名过渡 */
.hero {
  view-transition-name: hero-image;
}

::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 0.5s;
}

Scroll-Driven Animations

滚动驱动动画

css

/* Animate on scroll progress */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

css

/* 随滚动进度触发动画 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Responsive Design Patterns

响应式设计模式

Modern Media Query Strategy

现代媒体查询策略

css

/* Mobile-first approach */
.component {
  /* Base mobile styles */
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .component {
    padding: 3rem;
  }
}

/* Wide desktop */
@media (min-width: 1440px) {
  .component {
    padding: 4rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e5e5e5;
  }
}

css

/* 移动端优先方案 */
.component {
  /* 基础移动端样式 */
  padding: 1rem;
}

/* 平板端 */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .component {
    padding: 3rem;
  }
}

/* 宽屏桌面端 */
@media (min-width: 1440px) {
  .component {
    padding: 4rem;
  }
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 暗黑模式偏好 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e5e5e5;
  }
}

Fluid Typography

流体排版

css

/* Clamp for responsive font sizes */
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

body {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

/* Or using custom properties */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-min-size: 16;
  --fluid-max-size: 20;
  
  --fluid-size: calc(
    (var(--fluid-min-size) * 1px) +
    (var(--fluid-max-size) - var(--fluid-min-size)) *
    ((100vw - (var(--fluid-min-width) * 1px)) /
    (var(--fluid-max-width) - var(--fluid-min-width)))
  );
}

body {
  font-size: clamp(
    var(--fluid-min-size) * 1px,
    var(--fluid-size),
    var(--fluid-max-size) * 1px
  );
}

css

/* 使用clamp实现响应式字号 */
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

body {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

/* 或使用自定义属性 */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-min-size: 16;
  --fluid-max-size: 20;
  
  --fluid-size: calc(
    (var(--fluid-min-size) * 1px) +
    (var(--fluid-max-size) - var(--fluid-min-size)) *
    ((100vw - (var(--fluid-min-width) * 1px)) /
    (var(--fluid-max-width) - var(--fluid-min-width)))
  );
}

body {
  font-size: clamp(
    var(--fluid-min-size) * 1px,
    var(--fluid-size),
    var(--fluid-max-size) * 1px
  );
}

Performance Optimization

性能优化

Critical Performance Rules

关键性能规则

css

/* 1. Avoid expensive properties */
.avoid {
  box-shadow: ...; /* OK, GPU accelerated */
  filter: ...; /* Expensive, use sparingly */
}

/* 2. Use containment for isolated components */
.card {
  contain: layout style paint;
  /* Tells browser this element's styles won't affect others */
}

.isolated-component {
  content-visibility: auto; /* Skip rendering offscreen elements */
}

/* 3. Optimize selectors - specificity vs performance */
/* Fast ✅ */
.button { }
.nav-item { }

/* Slower ❌ */
div.container ul li a.link { }
[class*="btn-"] { }

css

/* 1. 避免高开销属性 */
.avoid {
  box-shadow: ...; /* 可行，GPU加速 */
  filter: ...; /* 高开销，谨慎使用 */
}

/* 2. 对独立组件使用containment */
.card {
  contain: layout style paint;
  /* 告知浏览器该元素的样式不会影响其他元素 */
}

.isolated-component {
  content-visibility: auto; /* 跳过渲染屏幕外元素 */
}

/* 3. 优化选择器 - 优先级与性能的平衡 */
/* 快速 ✅ */
.button { }
.nav-item { }

/* 较慢 ❌ */
div.container ul li a.link { }
[class*="btn-"] { }

CSS Loading Strategies

CSS加载策略

html

<!-- Critical CSS inline in <head> -->
<style>
  /* Above-the-fold styles */
</style>

<!-- Non-critical CSS with media query trick -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- Preload for faster loading -->
<link rel="preload" href="fonts.woff2" as="font" type="font/woff2" crossorigin>

html

/* 关键CSS内联在<head>中 */
<style>
  /* 首屏样式 */
</style>

/* 非关键CSS使用媒体查询技巧延迟加载 */
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

/* 预加载以提升加载速度 */
<link rel="preload" href="fonts.woff2" as="font" type="font/woff2" crossorigin>

Naming Conventions and Organization

命名规范与组织

BEM (Block Element Modifier)

BEM（块-元素-修饰符）

css

/* Block */
.card { }

/* Element - part of block */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier - variation of block */
.card--featured { }
.card--large { }
.card__title--primary { }

css

/* 块 */
.card { }

/* 元素 - 块的一部分 */
.card__title { }
.card__body { }
.card__footer { }

/* 修饰符 - 块的变体 */
.card--featured { }
.card--large { }
.card__title--primary { }

Utility-First (Tailwind-style)

工具类优先（Tailwind风格）

css

/* Spacing utilities */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* Layout utilities */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Typography utilities */
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

css

/* 间距工具类 */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* 布局工具类 */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* 排版工具类 */
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

File Organization

文件组织

styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── utilities.css
├── components/
│   ├── button.css
│   ├── card.css
│   └── nav.css
├── layout/
│   ├── grid.css
│   ├── header.css
│   └── footer.css
├── themes/
│   ├── light.css
│   └── dark.css
└── main.css (imports all)

styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── utilities.css
├── components/
│   ├── button.css
│   ├── card.css
│   └── nav.css
├── layout/
│   ├── grid.css
│   ├── header.css
│   └── footer.css
├── themes/
│   ├── light.css
│   └── dark.css
└── main.css（导入所有文件）

Modern Color Functions

现代颜色函数

css

:root {
  /* Modern color functions */
  --primary: oklch(60% 0.2 250); /* Perceptually uniform */
  --surface: color-mix(in oklch, var(--primary) 10%, white);
  
  /* Relative colors */
  --primary-light: oklch(from var(--primary) calc(l + 20%) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 20%) c h);
  
  /* Color contrast for accessibility */
  --text-color: color-contrast(
    var(--surface) vs black, white
  );
}

css

:root {
  /* 现代颜色函数 */
  --primary: oklch(60% 0.2 250); /* 感知均匀的颜色空间 */
  --surface: color-mix(in oklch, var(--primary) 10%, white);
  
  /* 相对颜色 */
  --primary-light: oklch(from var(--primary) calc(l + 20%) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 20%) c h);
  
  /* 用于无障碍的颜色对比度 */
  --text-color: color-contrast(
    var(--surface) vs black, white
  );
}

Browser Compatibility Strategies

浏览器兼容性策略

Feature Queries (@supports)

特性查询（@supports）

css

/* Fallback for older browsers */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* Enhanced for modern browsers */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Progressive enhancement */
.button {
  background: blue;
}

@supports (backdrop-filter: blur(10px)) {
  .button {
    background: rgba(0, 0, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

css

/* 为旧浏览器提供降级方案 */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* 为现代浏览器提供增强效果 */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* 渐进式增强 */
.button {
  background: blue;
}

@supports (backdrop-filter: blur(10px)) {
  .button {
    background: rgba(0, 0, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Common Patterns and Solutions

常见模式与解决方案

Aspect Ratio

宽高比

css

/* Modern way */
.video {
  aspect-ratio: 16 / 9;
}

/* For images */
img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

css

/* 现代实现方式 */
.video {
  aspect-ratio: 16 / 9;
}

/* 图片适配 */
img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Truncation

文本截断

css

/* Single line */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multiple lines */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

css

/* 单行截断 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行截断 */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Smooth Scrolling

平滑滚动

css

html {
  scroll-behavior: smooth;
}

/* Scroll snapping */
.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.carousel > * {
  scroll-snap-align: start;
}

css

html {
  scroll-behavior: smooth;
}

/* 滚动吸附 */
.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.carousel > * {
  scroll-snap-align: start;
}

Accessibility Considerations

无障碍考虑

css

/* Focus visible for keyboard users only */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

css

/* 仅为键盘用户显示焦点样式 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 视觉隐藏但保留给屏幕阅读器 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

CSS Reset / Normalize

CSS重置/标准化

css

/* Modern CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

css

/* 现代CSS重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

Quick Reference

快速参考

See references/ for detailed guides on:

Modern layout techniques (flexbox, grid, container queries)
Animation and transition best practices
Performance optimization strategies
Responsive design patterns
Accessibility guidelines

查看[references/]获取以下内容的详细指南：

现代布局技术（flexbox、grid、容器查询）
动画与过渡最佳实践
性能优化策略
响应式设计模式
无障碍指南

Workflow

工作流程

Start with context7 - Look up unfamiliar properties or modern features
Mobile-first - Design and code for mobile, enhance for larger screens
Use feature queries - Progressive enhancement with @supports
Test across browsers - Verify in Chrome, Firefox, Safari, Edge
Validate - Use W3C CSS Validator for standard compliance
Optimize - Minimize reflows, use contain, leverage GPU acceleration
Document - Comment complex calculations, magic numbers, browser hacks

从context7开始 - 查阅不熟悉的属性或现代特性
移动端优先 - 为移动端设计和编码，为大屏幕添加增强效果
使用特性查询 - 结合@supports实现渐进式增强
跨浏览器测试 - 在Chrome、Firefox、Safari、Edge中验证
验证 - 使用W3C CSS验证器确保符合标准
优化 - 最小化重排，使用contain，利用GPU加速
文档化 - 为复杂计算、魔法数值、浏览器hack添加注释

Tools and Resources

工具与资源

context7 - Primary documentation lookup tool
MDN Web Docs - Comprehensive CSS reference (via context7)
Can I Use - Browser compatibility data (via context7)
CSS Specifications - W3C specs for detailed behavior (via context7)
PostCSS - Transform CSS with JavaScript plugins
CSS Modules - Scoped CSS for components
Sass/SCSS - CSS preprocessor with variables, nesting, mixins
Lightning CSS - Fast CSS parser, transformer, and minifier

Remember: When in doubt about any CSS feature, syntax, or browser support, use context7 to look it up in real-time documentation.

context7 - 主要文档查阅工具
MDN Web Docs - 全面的CSS参考（通过context7访问）
Can I Use - 浏览器兼容性数据（通过context7访问）
CSS Specifications - W3C规范，了解详细行为（通过context7访问）
PostCSS - 使用JavaScript插件转换CSS
CSS Modules - 组件级作用域CSS
Sass/SCSS - 带变量、嵌套、混合宏的CSS预处理器
Lightning CSS - 快速的CSS解析器、转换器和压缩器

记住：当你对任何CSS特性、语法或浏览器支持情况有疑问时，请使用context7实时查阅文档。