CSS all 属性：让样式重置变得更简单
在前端开发中，我们常常遇到一个令人头疼的问题：不同浏览器对默认样式处理不一致，导致页面在不同设备上显示效果差异明显。比如，某些元素的 padding、margin 或字体大小在 Chrome 和 Safari 中表现不同。为了解决这类问题，开发者们通常会使用 CSS 重置（CSS Reset）或规范化（Normalize）方案。但今天我们要聊的，是一个更简洁、更强大的工具——CSS 的 all 属性。
all 属性是 CSS3 引入的一个强大特性，它允许你一次性控制一个元素的所有样式属性。它的出现，让重置或统一样式变得前所未有的简单。尤其适合在项目初始化阶段，快速清除浏览器默认样式，为后续开发打下统一基础。
什么是 CSS all 属性？
all 属性本质上是一个“通配符”属性，它可以接收如下几个值：
initial：将所有 CSS 属性重置为它们的初始值（即浏览器默认值）inherit：继承父元素的属性值unset：如果属性有继承性，则继承父元素；否则重置为初始值revert：还原到浏览器默认样式，或当前样式表中的默认值（优先级较高）
这个属性的语法非常简洁：
.element {
all: initial;
}
它相当于你对这个元素的所有属性做了一次“一键重置”。
用 all: initial 实现快速重置
想象你正在开发一个全新的组件库，希望每个组件的样式都从“白纸”开始，不被任何默认样式干扰。这时，all: initial 就成了你的首选。
/* 重置所有默认样式，让元素从零开始 */
.reset-box {
all: initial; /* 重置所有样式属性为初始值 */
display: block; /* 重新设置显示方式 */
font-size: 16px; /* 设置字体大小 */
color: #333; /* 设置文字颜色 */
background-color: #f0f0f0; /* 设置背景色 */
padding: 20px; /* 添加内边距 */
border: 1px solid #ccc; /* 添加边框 */
}
在这个例子中，all: initial 会把所有样式（如 margin、padding、font、color 等）恢复到浏览器默认状态。虽然这会清除你之前可能设置的样式，但正因如此，它确保了组件的样式完全由你控制，不会受到外部影响。
💡 小贴士：
initial不仅清除样式，还会恢复属性的默认行为。比如display会被重置为inline，font-size会被设为16px（标准值）。
all: unset 与 all: revert 的区别
虽然 all: initial 很强大，但它并不总是最合适的选项。有时你希望保留某些继承属性（比如字体大小），同时清除其他非继承属性。这时，unset 和 revert 就派上用场了。
使用 all: unset
unset 的行为是：如果属性是可继承的（如 font-size、color），就继承父元素的值；如果是不可继承的（如 margin、padding），就重置为初始值。
.unset-box {
all: unset; /* 可继承的属性继承，不可继承的重置 */
background-color: #e0e0e0; /* 背景色仍然可以自定义 */
border: 2px solid #007acc; /* 边框也保留自定义 */
}
.parent {
font-size: 18px;
color: #2c3e50;
}
在这个例子中，.unset-box 的字体大小和颜色会继承 .parent 的值，但 margin、padding 等非继承属性会被清除。
使用 all: revert
revert 是最“保守”的值。它会将属性还原到“浏览器默认样式”或当前样式表中的默认值，优先级高于 initial。
.revert-box {
all: revert; /* 恢复为浏览器或当前样式表的默认值 */
font-size: 20px; /* 这个值会被覆盖，因为 revert 优先级更高 */
}
⚠️ 注意：
revert在某些旧浏览器中支持度较低，建议在现代项目中使用前确认兼容性。
实际应用：构建组件库的样式初始化
在实际项目中，all 属性特别适合用于创建“样式隔离”的组件容器。比如你在开发一个按钮组件，希望它在任何页面中都能保持一致的外观。
/* 按钮组件的样式初始化 */
.btn {
all: initial; /* 从零开始，避免外部样式干扰 */
display: inline-block;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
color: #fff;
background-color: #007acc;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* 悬停效果 */
.btn:hover {
background-color: #005f8c;
}
这里，all: initial 确保按钮不受外部 body 或 div 默认样式的影响，比如 margin 或 font-size 的干扰。无论你把按钮放在哪个页面，它的表现都是一致的。
兼容性与注意事项
尽管 all 属性功能强大，但它的兼容性需要关注。在主流现代浏览器（Chrome 66+、Firefox 66+、Safari 12+）中支持良好，但在一些老版本浏览器中可能无法识别。
你可以通过以下方式判断是否支持：
/* 降级处理：不支持 all 的浏览器使用传统方式 */
@supports not (all: initial) {
.fallback-reset {
margin: 0;
padding: 0;
font-size: 16px;
font-family: inherit;
color: inherit;
/* 其他需要重置的属性 */
}
}
另外，all 属性的值会覆盖你已经写好的样式。因此，不要在已经设置了大量样式的元素上随意使用 all: initial，否则可能导致样式丢失。
与 CSS Reset 和 Normalize 的对比
你可能会问：既然有 all: initial，那还需要用 CSS Reset 或 Normalize 吗？
答案是：它们各有用途，可以互补。
- CSS Reset：手动重置所有常见元素的 margin、padding、border 等，控制力强，但代码量大。
- Normalize.css：保留语义化元素的合理默认样式，只修复浏览器差异，更“智能”。
- CSS all 属性：提供一种“一键式”重置方式，简洁高效，适合快速初始化。
在实际项目中，你可以结合使用：先用 all: initial 做全局重置，再用 Normalize 修复特定元素的语义化问题。
最佳实践建议
- 仅在需要时使用：不要滥用
all，只在组件初始化、样式隔离场景中使用。 - 优先使用 unset：如果你希望保留继承属性，
unset更安全。 - 配合 @supports 使用：为旧浏览器提供降级方案。
- 避免在全局选择器中使用：如
* { all: initial; }会破坏页面结构，慎用。 - 结合工具链：在构建工具中使用 PostCSS 插件（如
postcss-all）进行自动兼容处理。
总结
CSS all 属性是一个被低估但极其有用的工具。它简化了样式重置的流程，让开发者能更专注于设计本身，而不是被浏览器默认样式“绊倒”。无论是构建组件库、开发独立模块，还是进行样式隔离，all 属性都能显著提升开发效率。
掌握它，不仅能让你的代码更简洁，还能增强项目的可维护性。在现代 CSS 开发中，all 属性已不再是“高级技巧”，而是必备技能之一。
下次当你面对浏览器样式差异问题时，不妨先试试 all: initial，也许问题就迎刃而解了。