现代 CSS：级联层、容器查询与逻辑属性

现代 CSS 改变了哪些工程选择

预处理器、CSS-in-JS 和框架插件曾用于弥补平台能力不足。随着原生嵌套、Custom Properties、Cascade Layers、Container Queries 和逻辑属性成熟，选型时应先判断浏览器平台是否已经解决问题，再决定是否增加编译或运行时抽象。

@layer 显式控制不同样式来源的级联顺序，降低选择器权重竞赛：

@layer reset, tokens, base, components, utilities, overrides;

@layer components {
  .button {
    background: var(--color-action);
  }
}

层级顺序应在入口统一声明。第三方样式、组件样式和工具类进入哪个层，需要成为设计系统契约的一部分。

媒体查询根据视口适配，容器查询根据组件所在空间适配。可复用卡片不再需要知道自己位于侧栏、弹窗还是主内容区：

.task-list {
  container-type: inline-size;
}

@container (min-width: 40rem) {
  .task-card {
    grid-template-columns: 1fr auto;
  }
}

容器建立会影响布局和尺寸计算，需通过真实嵌套场景验证，而不是给每个元素都开启容器。

使用 margin-inline-start、padding-block、inset-inline-end 等逻辑属性，可以让布局适应横向或纵向书写模式及 RTL。它们解决的是方向语义，不只是替换 left 和 right 的代码风格。

通过 Baseline、浏览器兼容数据和真实用户分布确定支持范围。对非关键视觉增强可以使用 @supports 渐进启用；关键交互则要提供可用的降级方案。