现代 CSS 特性：提升开发效率的实用技巧

现代 CSS 提供了许多强大的新特性，可以显著提升开发效率和代码可维护性。本文将重点介绍四个关键特性：CSS 变量、逻辑属性、容器查询和新型选择器。

1. CSS 变量与自定义属性

CSS 变量（也称为自定义属性）允许开发者在样式表中定义可重用的值，并在整个文档中引用这些值。

基本用法

/* 定义变量 */
:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

/* 使用变量 */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

变量继承与覆盖

/* 全局变量 */
:root {
  --text-color: #333;
}

/* 组件内覆盖 */
.dark-mode {
  --text-color: #fff;
}

body {
  color: var(--text-color);
}

实践建议：

• 使用变量存储颜色、间距、字体等设计系统值
• 通过覆盖变量实现主题切换
• 变量名使用语义化命名（如--color-primary而非--blue）

2. 逻辑属性

逻辑属性根据文档的书写模式（writing mode）自动调整，而不是固定物理方向（左/右/上/下）。

常用逻辑属性

/* 传统物理属性 */
.box {
  margin-left: 10px;
  padding-top: 20px;
}

/* 逻辑属性替代 */
.box {
  margin-inline-start: 10px;
  padding-block-start: 20px;
}

实践建议：

• 在支持多语言（如RTL语言）的项目中使用逻辑属性
• 逻辑属性与物理属性可以混合使用
• 对于简单项目，可以先从边距和填充开始使用逻辑属性

3. 容器查询

容器查询允许组件根据其容器（而非视口）的尺寸调整样式，解决了媒体查询只能响应视口尺寸的局限性。

基本用法

/* 定义容器 */
.card-container {
  container-type: inline-size;
}

/* 容器查询 */
@container (min-width: 400px) {
  .card {
    display: flex;
  }
  
  .card img {
    width: 150px;
  }
}

容器查询单位

.card {
  /* 相对于容器宽度的百分比 */
  width: 50cqw;
  
  /* 相对于容器高度的百分比 */
  height: 30cqh;
}

实践建议：

• 为可重用组件使用容器查询
• 结合CSS Grid/Flexbox实现更灵活的布局
• 渐进增强：为不支持容器查询的浏览器提供合理的默认样式

4. 新型选择器

现代CSS引入了几个强大的新选择器，可以简化样式表并实现以前需要JavaScript才能完成的功能。

:is() 和 :where()

/* 传统写法 */
header h1, 
header h2, 
header h3 {
  color: blue;
}

/* 使用:is()简化 */
header :is(h1, h2, h3) {
  color: blue;
}

/* :where()与:is()类似，但优先级总是0 */
:where(header) h1 {
  color: blue; /* 优先级等同于h1选择器 */
}

:has() 父选择器

/* 选择包含img的a标签 */
a:has(img) {
  border: 1px solid #ccc;
}

/* 选择包含.active子元素的列表项 */
li:has(.active) {
  font-weight: bold;
}

/* 选择后面跟着p的h2 */
h2:has(+ p) {
  margin-bottom: 0;
}

实践建议：

• 使用:is()减少重复选择器
• 使用:where()创建低优先级样式
• :has()功能强大但性能影响较大，谨慎使用

综合示例：现代CSS构建卡片组件

/* 定义设计系统变量 */
:root {
  --color-primary: #4285f4;
  --color-text: #202124;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

.card {
  container-type: inline-size;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 2);
  color: var(--color-text);
}

/* 容器查询调整布局 */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-unit);
  }
}

/* 使用逻辑属性确保RTL兼容 */
.card-title {
  margin-inline-start: 0;
  padding-block-end: var(--spacing-unit);
}

/* 使用:has()检测是否有图片 */
.card:has(.card-image) {
  background: #f8f9fa;
}

/* 使用:is()简化选择器 */
.card :is(h2, h3, h4) {
  color: var(--color-primary);
}

浏览器支持与渐进增强

/* 兼容性处理示例 */
.card {
  margin-left: 10px; /* 回退值 */
  margin-inline-start: 10px;
}

@supports (container-type: inline-size) {
  .card {
    container-type: inline-size;
  }
}

总结

现代CSS特性为开发者提供了更强大、更灵活的工具集：

1. CSS变量：提升代码可维护性，实现动态主题
2. 逻辑属性：构建方向无关的布局，支持多语言
3. 容器查询：创建真正自适应的组件
4. 新型选择器：简化CSS并实现复杂选择逻辑

这些特性可以单独使用，也可以组合使用来创建更健壮、更易维护的样式系统。建议从CSS变量开始逐步采用这些新特性，并根据项目需求选择合适的兼容性策略。