用一行css就能搞定的事，真没必要写js

前端的世界里，能用 CSS 解决的效果就别急着上 JS，这是我自己慢慢悟出来的。JS 写多了，交互逻辑、状态管理都跟着复杂，其实不少需求浏览器早帮你准备好了。

1. 文字溢出显示省略号

那种"标题太长就截断加三点"的效果，以前我还会算字符长度，其实一行 CSS 就够：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键是这三个属性要一起用，少一个都不生效。现在还支持多行截断，加个 -webkit-line-clamp 就行，完全不用算。

2. 等比缩放的容器

做卡片图的时候经常要固定比例，用 aspect-ratio 直接声明，比监听窗口变化去算高度省事太多：

.thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
}

以前这套得靠 padding-top 的 hack 或者 JS 监听 resize，现在一行搞定。

3. 悬停过渡

鼠标移上去变色、放大，用 transition 加 :hover 就够了，别为了这点动效引一个动画库：

.btn {
  transition: background-color .2s ease;
}
.btn:hover {
  background-color: #409eff;
}

记住一个原则：视觉效果优先找 CSS，JS 留给真正的逻辑。这样页面更轻，也更好维护。