CSS 现代化实践

CSS 在近年迎来了一批真正改变开发体验的特性，本文挑选四个高频场景介绍。

容器查询

不再只能”看窗口”，组件可以根据自身容器尺寸响应：

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-title {
    font-size: 1.5rem;
  }
}

:has() 选择器

“父选择器”让状态驱动的样式变得简洁：

/* 含图片的卡片增加间距 */
.card:has(img) {
  padding-top: 1rem;
}

级联层

用 @layer 明确管理样式优先级，告别 !important 军备竞赛：

@layer base, components, utilities;

逻辑属性

margin-inline、padding-block 让样式天然适配书写方向：

/* 物理属性 */ margin-left: 1rem;
/* 逻辑属性 */ margin-inline-start: 1rem;

小结

新特性不是玩具，而是让 CSS 更可维护的工具。建议从逻辑属性和 :has() 开始，逐步迁移存量代码。