在前端开发中，CSS 代码的简洁与高效，直接影响项目的可维护性和团队开发效率。然而，许多开发者往往习惯写一些“长篇大论”的 CSS 样式，而忽略了 CSS 新特性带来的优化能力。
今天，通过这张简洁有力的图表，我们来看看如何用一些 CSS “捷径”，让你的代码更加干净、易读，同时也更“现代化”。
1. 使用 min() 函数优化宽度
传统写法：
.item {
width: 50%;
max-width: 20rem;
}
优化写法：
.item {
width: min(50%, 20rem);
}
解读：
- min() 函数表示取最小值。你不需要再分别定义 width 和 max-width，一行代码即可完成同样的功能，逻辑更清晰。
- 代码更短，逻辑一目了然，维护更简单。
2. 使用 :is() 优化伪类选择器
传统写法：
.item:is(:hover, :focus) {
/* style */
}
优化写法：
.item:hover, .item:focus {
/* style */
}
解读：
- 使用 :is() 可以组合多个伪类，从而避免重复书写选择器，尤其是在复杂结构中。
- 注意：:is() 的浏览器兼容性逐渐完善，但在老旧浏览器上需注意回退方案。
3. 利用 margin-inline 简化左右外边距
传统写法：
.item {
margin-left: 10px;
margin-right: 10px;
}
优化写法：
.item {
margin-inline: 10px;
}
解读：
- margin-inline 是 CSS 中的新特性，直接定义左右外边距，自动适配横向书写模式。
- 如果你习惯在国际化项目中使用 RTL（从右到左）方向，这个属性会大大简化你的代码逻辑。
4. 选择器优化：直接组合伪类
传统写法：
.item:hover, .item:focus {
/* style */
}
更现代的写法：
.item:is(:hover, :focus) {
/* style */
}
解读：
- 在多伪类操作时，:is() 提供了更简洁的书写方式，避免了重复的选择器代码，尤其在嵌套较深的结构中，优化效果显著。
总结：CSS 现代化，写出更简洁的代码
随着 CSS 新特性的不断更新，我们有越来越多的工具帮助写出更高效的代码。通过上述技巧，你可以：
- 减少代码冗余，提升可读性；
- 更方便地维护样式表，减少重复工作；
- 紧跟 CSS 标准，使用更现代、更强大的特性。
写代码是一种艺术，CSS 优化让你成为“代码艺术家”！
分享给你的前端小伙伴，一起写出更漂亮的样式表吧！
评论区：你最常用的 CSS 优化技巧是什么？还有哪些你觉得值得推荐的捷径？一起来交流吧！