在前端开发中，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 优化技巧是什么？还有哪些你觉得值得推荐的捷径？一起来交流吧！