极小化CSS

适用于小型、极简项目——个人网站、原型、简单的落地页。尽可能少写CSS，让浏览器处理其余部分。如果项目规模超过几个文件，或需要令牌系统或命名约定，请改用more-css。

核心原则

1. 1. 信任浏览器 — 不要重置已经正常工作的内容
2. 使用现代特性 — 让CSS处理原本由JavaScript完成的工作
3. 尊重用户偏好 — 遵循系统对动画、对比度和配色方案的设置
4. 编写弹性样式 — 使用逻辑属性以支持国际化

指南

不要声明基础字号

让浏览器处理基础字号，默认为100%（通常为16px）。用户可以在浏览器设置中调整此值以提升可访问性。

css
/ 不要这样做 /
:root {
font-size: 16px;
}
html {
font-size: 100%;
}
body {
font-size: 1rem;
}

/ 什么都不做 — 浏览器已处理 /

使用字形更优的系统字体

在San Francisco字体中启用大写I、小写l和带斜线零的区分字符。

css
:root {
font-family: system-ui;
font-feature-settings: ss06;
}

改善文本换行

防止孤行并改善断行效果。

css
:where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}

:where(p) {
text-wrap: pretty;
}

不要声明默认颜色

不要在根元素上声明颜色和背景色。浏览器默认值即可正常工作并尊重用户偏好。

css
/ 不要这样做 /
body {
color: #000;
background-color: #fff;
}

/ 什么都不做 — 浏览器默认值即可 /

启用亮色和暗色模式

使用color-scheme根据用户系统偏好自动支持亮色和暗色模式。

css
:root {
color-scheme: light dark;
}

自定义交互元素颜色

使用accent-color更改复选框、单选按钮、范围滑块和进度条的颜色。

css
:root {
accent-color: #0066cc; / 替换为所需颜色 /
}

使SVG图标与文本颜色匹配

让SVG图标自动继承当前文本颜色。

css
:where(svg) {
fill: currentColor;
}

使用逻辑属性

编写适用于所有语言和书写方向的CSS。使用逻辑属性替代物理属性。

css
/ 不要这样做 /
.card {
margin-left: 1rem;
margin-right: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
width: 20rem;
min-height: 20rem;
}

/ 这样做 /
.card {
margin-inline: 1rem;
padding-block: 2rem;
inline-size: 20rem;
min-block-size: 20rem;
}

使媒体嵌入自适应

确保图片、视频和iframe按比例缩放。

css
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}

为交互元素添加指针光标

为所有可点击元素提供基础的悬停提示。

css
:where(input:is([type=checkbox], [type=radio]), select, label, button) {
cursor: pointer;
}

支持强制颜色模式

通过添加显式边框，确保按钮在Windows高对比度模式下保持可见。

css
@media (forced-colors: active) {
:where(button) {
border: 1px solid;
}
}

条件启用平滑滚动

仅在用户未请求减少动画时应用平滑滚动。

css
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}

最小基础样式表

以下是包含所有指南的完整最小基础样式表：

css
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
font-feature-settings: ss06;
}

:where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}

:where(p) {
text-wrap: pretty;
}

:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}

:where(svg) {
fill: currentColor;
}

:where(input:is([type=checkbox], [type=radio]), select, label, button) {
cursor: pointer;
}

@media (forced-colors: active) {
:where(button) {
border: 1px solid;
}
}

@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}