modern-css

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modern CSS

现代CSS

Pure native CSS for building interfaces — no preprocessors, no frameworks.

使用纯原生CSS构建界面——无需预处理器，无需框架。

When to Use (and When NOT to)

适用场景（与不适用场景）

Use Freely (Baseline)	Feature-Detect First
CSS Grid, Subgrid, Flexbox	`@function` , `if()` (Chrome-only)
Container Queries (size + style)	Customizable `<select>` (Chrome-only)
`:has()` , `:is()` , `:where()`	Scroll-state queries (Chrome-only)
CSS Nesting, `@layer` , `@scope`	`sibling-index()` , `sibling-count()`
`@property` (typed custom props)	`::scroll-button()` , `::scroll-marker`
`oklch()` , `color-mix()` , `light-dark()`	Typed `attr()` beyond `content`
Relative color syntax	`field-sizing: content`
`@starting-style` , `transition-behavior`	`interpolate-size` (Chrome-only)
Scroll-driven animations	Grid Lanes / masonry (experimental)
Anchor positioning, Popover API	`random()` (Safari TP only)
`text-wrap: balance` , `linear()` easing	`@mixin` / `@apply` (no browser yet)
View Transitions, logical properties

可自由使用（基线支持）	需先检测特性支持
CSS Grid、Subgrid、Flexbox	`@function` 、 `if()` （仅Chrome支持）
Container Queries（尺寸+样式）	可自定义 `<select>` （仅Chrome支持）
`:has()` 、 `:is()` 、 `:where()`	滚动状态查询（仅Chrome支持）
CSS嵌套、 `@layer` 、 `@scope`	`sibling-index()` 、 `sibling-count()`
`@property` （类型化自定义属性）	`::scroll-button()` 、 `::scroll-marker`
`oklch()` 、 `color-mix()` 、 `light-dark()`	超出 `content` 的类型化 `attr()`
相对颜色语法	`field-sizing: content`
`@starting-style` 、 `transition-behavior`	`interpolate-size` （仅Chrome支持）
滚动驱动动画	Grid Lanes / 瀑布流（实验性特性）
锚点定位、Popover API	`random()` （仅Safari技术预览版支持）
`text-wrap: balance` 、 `linear()` 缓动	`@mixin` / `@apply` （暂无浏览器支持）
视图过渡、逻辑属性

CRITICAL: The Modern Cascade

核心要点：现代层叠规则

Understanding how styles resolve is the single most important concept in CSS. The additions of

@layer

and

@scope

fundamentally changed the cascade algorithm.

Style Resolution Order (highest priority wins):
┌─────────────────────────────────────────────────┐
│ 1. Transitions (active transition wins)         │
│ 2. !important (user-agent > user > author)      │
│ 3. @layer order (later layer > earlier layer)   │
│ 4. Unlayered styles (beat ALL layers)           │
│ 5. Specificity (ID > class > element)           │
│ 6. @scope proximity (closer root wins)      NEW │
│ 7. Source order (later > earlier)               │
└─────────────────────────────────────────────────┘

Unlayered > Last layer > ... > First layer
           (utilities)        (reset)

Cascade layers (

@layer

) and scope proximity (

@scope

) are now more powerful than selector specificity. Define your layer order once (

@layer reset, base, components, utilities;

) and specificity wars disappear. Unlayered styles always beat layered styles — use this for overrides.

理解样式的解析逻辑是CSS中最重要的概念。

@layer

和

@scope

的加入从根本上改变了层叠算法。

Style Resolution Order (highest priority wins):
┌─────────────────────────────────────────────────┐
│ 1. Transitions (active transition wins)         │
│ 2. !important (user-agent > user > author)      │
│ 3. @layer order (later layer > earlier layer)   │
│ 4. Unlayered styles (beat ALL layers)           │
│ 5. Specificity (ID > class > element)           │
│ 6. @scope proximity (closer root wins)      NEW │
│ 7. Source order (later > earlier)               │
└─────────────────────────────────────────────────┘

Unlayered > Last layer > ... > First layer
           (utilities)        (reset)

层叠层级（

@layer

）和作用域优先级（

@scope

）现在比选择器优先级更强大。只需定义一次层级顺序（

@layer reset, base, components, utilities;

），就能避免优先级冲突。未分层的样式始终优先于分层样式——可用于覆盖样式。

Quick Decision Trees

快速决策树

"How do I lay this out?"

"我该如何布局？"

Layout approach?
├─ 2D grid (rows + columns)         → CSS Grid
│  ├─ Children must align across    → Grid + Subgrid
│  └─ Waterfall / masonry           → grid-lanes (experimental)
├─ 1D row OR column                 → Flexbox
├─ Component adapts to container    → Container Query + Grid/Flex
├─ Viewport-based responsiveness    → @media range syntax
└─ Element sized to content         → fit-content / min-content / stretch

Layout approach?
├─ 2D grid (rows + columns)         → CSS Grid
│  ├─ Children must align across    → Grid + Subgrid
│  └─ Waterfall / masonry           → grid-lanes (experimental)
├─ 1D row OR column                 → Flexbox
├─ Component adapts to container    → Container Query + Grid/Flex
├─ Viewport-based responsiveness    → @media range syntax
└─ Element sized to content         → fit-content / min-content / stretch

"How do I style this state?"

"我该如何为状态设置样式？"

Style based on what?
├─ Child/descendant presence        → :has()
├─ Container size                   → @container (inline-size)
├─ Container custom property        → @container style()
├─ Scroll position (stuck/snapped)  → scroll-state() query
├─ Element's own custom property    → if(style(...))
├─ Browser feature support          → @supports
├─ User preference (motion/color)   → @media (prefers-*)
└─ Multiple selectors efficiently   → :is() / :where()

Style based on what?
├─ Child/descendant presence        → :has()
├─ Container size                   → @container (inline-size)
├─ Container custom property        → @container style()
├─ Scroll position (stuck/snapped)  → scroll-state() query
├─ Element's own custom property    → if(style(...))
├─ Browser feature support          → @supports
├─ User preference (motion/color)   → @media (prefers-*)
└─ Multiple selectors efficiently   → :is() / :where()

"How do I animate this?"

"我该如何实现动画？"

Animation type?
├─ Enter/appear on DOM              → @starting-style + transition
├─ Exit/disappear (display:none)    → transition-behavior: allow-discrete
├─ Animate to/from auto height      → interpolate-size: allow-keywords
├─ Scroll-linked (parallax/reveal)  → animation-timeline: scroll()/view()
├─ Page/view navigation             → View Transitions API
├─ Custom easing (bounce/spring)    → linear() function
└─ Always: respect user preference  → @media (prefers-reduced-motion)

Animation type?
├─ Enter/appear on DOM              → @starting-style + transition
├─ Exit/disappear (display:none)    → transition-behavior: allow-discrete
├─ Animate to/from auto height      → interpolate-size: allow-keywords
├─ Scroll-linked (parallax/reveal)  → animation-timeline: scroll()/view()
├─ Page/view navigation             → View Transitions API
├─ Custom easing (bounce/spring)    → linear() function
└─ Always: respect user preference  → @media (prefers-reduced-motion)

What CSS Replaced JavaScript For

CSS替代JavaScript的场景

JavaScript Pattern	CSS Replacement
Scroll position listeners	Scroll-driven animations
IntersectionObserver for reveal	`animation-timeline: view()`
Sticky header shadow toggle	`scroll-state(stuck: top)`
Floating UI / Popper.js	Anchor positioning
Carousel prev/next/dots	`::scroll-button()` , `::scroll-marker`
Auto-expanding textarea	`field-sizing: content`
Staggered animation delays	`sibling-index()`
`max-height: 9999px` hack	`interpolate-size: allow-keywords`
Parent element selection	`:has()`
Theme toggle logic	`light-dark()` + `color-scheme`
Tooltip/popover show/hide	Popover API + invoker commands
Color manipulation functions	`color-mix()` , relative color syntax

For non-Baseline features, always feature-detect with
@supports
or use progressive enhancement. Check MDN or Baseline for current browser support.

JavaScript模式	CSS替代方案
滚动位置监听器	滚动驱动动画
用于元素显示的IntersectionObserver	`animation-timeline: view()`
粘性头部阴影切换	`scroll-state(stuck: top)`
Floating UI / Popper.js	锚点定位
轮播图上一页/下一页/指示器	`::scroll-button()` 、 `::scroll-marker`
自动扩展的文本域	`field-sizing: content`
交错动画延迟	`sibling-index()`
`max-height: 9999px` 技巧	`interpolate-size: allow-keywords`
父元素选择	`:has()`
主题切换逻辑	`light-dark()` + `color-scheme`
工具提示/弹出框的显示/隐藏	Popover API + 调用命令
颜色处理函数	`color-mix()` 、相对颜色语法

对于非基线支持的特性，务必使用
@supports
进行特性检测，或采用渐进增强方案。可查看MDN或Baseline了解当前浏览器支持情况。

Anti-Patterns (CRITICAL)

反模式（核心要点）

Anti-Pattern	Problem	Fix
Overusing `!important`	Specificity arms race	Use `@layer` for cascade control
Deep nesting ( `.a .b .c .d` )	Fragile, DOM-coupled	Flat selectors, `@scope`
IDs for styling ( `#header` )	Too specific to override	Classes ( `.header` )
`@media` for component layout	Viewport-coupled, not reusable	Container queries
JS scroll listeners for effects	Janky, expensive	Scroll-driven animations
JS for tooltip positioning	Floating UI dependency	Anchor positioning
JS for carousel controls	Fragile, a11y issues	`::scroll-button` , `::scroll-marker`
JS for auto-expanding textarea	Unnecessary complexity	`field-sizing: content`
`max-height: 9999px` for animation	Wrong duration, janky	`interpolate-size: allow-keywords`
`margin-left` / `padding-right`	Breaks in RTL/vertical	Logical properties ( `margin-inline-start` )
`rgba()` with commas	Legacy syntax	`rgb(r g b / a)` space-separated
`appearance: none` on selects	Removes ALL functionality	`appearance: base-select`
Preprocessor-only variables	Can't change at runtime	CSS custom properties
Preprocessor-only nesting	Extra build step dependency	Native CSS nesting
Preprocessor color functions	Can't respond to context	`color-mix()` , relative colors
`text-wrap: balance` on paragraphs	Performance-heavy	Only headings/short text
`content-visibility` above fold	Delays LCP rendering	Only off-screen sections
Overusing `will-change`	Wastes GPU memory	Apply only to animating elements

反模式	问题	解决方案
过度使用 `!important`	引发优先级军备竞赛	使用 `@layer` 控制层叠规则
深层嵌套（ `.a .b .c .d` ）	脆弱、与DOM结构耦合	扁平选择器、 `@scope`
使用ID进行样式设置（ `#header` ）	优先级过高难以覆盖	使用类选择器（ `.header` ）
使用 `@media` 进行组件布局	与视口耦合，无法复用	容器查询
使用JS滚动监听器实现效果	卡顿、性能开销大	滚动驱动动画
使用JS处理工具提示定位	依赖Floating UI库	锚点定位
使用JS实现轮播图控制	脆弱、可访问性问题	`::scroll-button` 、 `::scroll-marker`
使用JS实现自动扩展文本域	不必要的复杂度	`field-sizing: content`
使用 `max-height: 9999px` 实现动画	动画时长错误、卡顿	`interpolate-size: allow-keywords`
使用 `margin-left` / `padding-right`	在RTL/垂直布局中失效	逻辑属性（ `margin-inline-start` ）
使用带逗号的 `rgba()`	旧版语法	使用空格分隔的 `rgb(r g b / a)`
对select使用 `appearance: none`	移除所有原生功能	使用 `appearance: base-select`
仅使用预处理器变量	无法在运行时修改	CSS自定义属性
仅使用预处理器嵌套	依赖额外构建步骤	原生CSS嵌套
仅使用预处理器颜色函数	无法响应上下文变化	`color-mix()` 、相对颜色
对段落使用 `text-wrap: balance`	性能开销大	仅对标题/短文本使用
对首屏内容使用 `content-visibility`	延迟LCP渲染	仅对屏幕外区域使用
过度使用 `will-change`	浪费GPU内存	仅对正在动画的元素使用

Reference Documentation

参考文档

File	Purpose
references/CASCADE.md	Nesting, `@layer` , `@scope` , cascade control, and CSS architecture
references/LAYOUT.md	Grid, Subgrid, Flexbox, Container Queries, and intrinsic sizing
references/SELECTORS.md	`:has()` , `:is()` , `:where()` , pseudo-elements, and state-based selection
references/COLOR.md	OKLCH, `color-mix()` , relative colors, `light-dark()` , and theming
references/TOKENS.md	`@property` , `@function` , `if()` , math functions, and design tokens
references/ANIMATION.md	`@starting-style` , `interpolate-size` , `linear()` , view transitions
references/SCROLL.md	Scroll-driven animations, scroll-state queries, native carousels
references/COMPONENTS.md	Customizable `<select>` , popover, anchor positioning, `field-sizing`
references/PERFORMANCE.md	`content-visibility` , typography, logical properties, accessibility
references/CHEATSHEET.md	Quick reference: browser support, legacy→modern patterns, units

文件	用途
references/CASCADE.md	嵌套、 `@layer` 、 `@scope` 、层叠控制与CSS架构
references/LAYOUT.md	Grid、Subgrid、Flexbox、容器查询与内在尺寸设置
references/SELECTORS.md	`:has()` 、 `:is()` 、 `:where()` 、伪元素与基于状态的选择
references/COLOR.md	OKLCH、 `color-mix()` 、相对颜色、 `light-dark()` 与主题定制
references/TOKENS.md	`@property` 、 `@function` 、 `if()` 、数学函数与设计令牌
references/ANIMATION.md	`@starting-style` 、 `interpolate-size` 、 `linear()` 、视图过渡
references/SCROLL.md	滚动驱动动画、滚动状态查询、原生轮播图
references/COMPONENTS.md	可自定义 `<select>` 、popover、锚点定位、 `field-sizing`
references/PERFORMANCE.md	`content-visibility` 、排版、逻辑属性、可访问性
references/CHEATSHEET.md	快速参考：浏览器支持、旧版→现代模式、单位

Sources

资料来源

Official Specifications

官方规范

CSS Snapshot 2025 — W3C
CSS Values and Units Level 5 —
```
if()
```
,
```
random()
```
,
```
sibling-index/count()
```
CSS Functions and Mixins Level 1 —
```
@function
```
,
```
@mixin
```
CSS Conditional Rules Level 5 — Scroll-state queries
CSS Anchor Positioning
CSS Overflow Level 5 — Scroll markers/buttons

CSS Snapshot 2025 — W3C
CSS Values and Units Level 5 —
```
if()
```
、
```
random()
```
、
```
sibling-index/count()
```
CSS Functions and Mixins Level 1 —
```
@function
```
、
```
@mixin
```
CSS Conditional Rules Level 5 — 滚动状态查询
CSS Anchor Positioning
CSS Overflow Level 5 — 滚动标记/按钮