css

专业 CSS 开发

凭借对浏览器兼容性和 CSS 规范的深入了解，按照当前最佳实践编写现代、高性能、易维护的 CSS。

使用 context7 查询文档

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

如何使用 context7 查询 CSS

# Look up CSS properties
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"

以下情况请使用 context7：

• 不确定确切的语法或属性值时
• 需要确认某项功能的浏览器支持情况时
• 想了解最新最佳实践时
• 使用前沿 CSS 功能时
• 需要了解规范细节或边缘情况时

核心原则

1. 移动优先的响应式设计 - 从移动端布局开始，再逐步扩展
2. 渐进增强 - 确保核心功能在所有环境中都可用，并在支持的环境中提供增强功能
3. CSS 层叠与优先级 - 理解并善加利用，而非对抗
4. 性能至关重要 - 尽量减少重排、优化动画、减小文件体积
5. 易于维护 - 使用一致的命名、合理的组织结构和清晰的文档

现代布局技术

使用 Flexbox 实现一维布局

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

使用 Grid 实现二维布局

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

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

/* 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 功能

自定义属性（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);
}

层叠层（@layer）

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

现代选择器

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

动画与过渡

高性能动画

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

视图过渡 API

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

滚动驱动动画

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

响应式设计模式

现代媒体查询策略

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

流式排版

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

性能优化

关键性能规则

/* 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 加载策略

<style>
  /* Above-the-fold styles */
</style>


<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">


<link rel="preload" href="fonts.woff2" as="font" type="font/woff2" crossorigin>

命名规范与组织

BEM（块、元素、修饰符）

/* Block */
.card { }

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

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

工具优先（Tailwind 风格）

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

文件组织

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)

现代颜色函数

: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
  );
}

浏览器兼容性策略

特性查询（@supports）

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

常见模式与解决方案

宽高比

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

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

文本截断

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

平滑滚动

html {
  scroll-behavior: smooth;
}

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

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

无障碍注意事项

/* 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 重置 / 规范化

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

快速参考

详细指南请参阅 references/：

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

工作流

1. 从 context7 开始 - 查询不熟悉的属性或现代功能
2. 移动优先 - 面向移动端进行设计和编码，再针对更大的屏幕进行增强
3. 使用特性查询 - 通过 @supports 实现渐进增强
4. 跨浏览器测试 - 在 Chrome、Firefox、Safari、Edge 中验证
5. 验证 - 使用 W3C CSS Validator 检查是否符合标准
6. 优化 - 尽量减少重排，使用 contain，利用 GPU 加速
7. 编写文档 - 为复杂计算、魔法数字和浏览器 hack 添加注释

工具与资源

• 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 实时查询文档。