引言

在现代前端开发中，随着应用复杂度的增加和用户体验需求的提升，我们经常需要动态地调整组件样式。传统上，这类工作往往依赖于 JavaScript 来完成复杂的样式计算。然而，随着 CSS 技术的发展，尤其是 calc() 函数的普及，我们可以利用纯 CSS 的能力来进行更高效、简洁且易于维护的样式控制。

本文将以一个实际案例——“超商企业供应链系统的商品列表展示”为例，探讨如何通过 CSS 的 calc() 属性来替代原本使用 JavaScript 实现的动态样式逻辑，从而优化性能并提高代码可读性和可维护性。

一、背景介绍与问题分析

1.1 场景描述

在一个典型的超商供应链管理系统中，商品列表页通常会显示大量商品信息，并支持多种筛选条件（如品牌、分类、价格区间等）。为了保证良好的视觉体验，在不同屏幕尺寸下，我们需要自适应地调整每行显示的商品数量及间距。

例如，假设我们希望实现以下布局规则：

• 在大屏幕上（≥1280px），每行最多展示 5 个商品；
• 中等屏幕（960px ~ 1279px）时，每行最多展示 4 个商品；
• 小屏设备（<960px）则限制为每行最多 2 个商品；

此外，还需确保每个商品卡片之间的水平和垂直间距一致，整体居中对齐。

1.2 原始实现方式（基于 JavaScript）

// App.js
import React, { useState, useEffect } from 'react';
import ProductCard from './ProductCard';

function ProductList() {
  const [products] = useState([...]); // 商品数组
  const [columns, setColumns] = useState(5);

  useEffect(() => {
    function updateColumns() {
      const width = window.innerWidth;
      if (width >= 1280) {
        setColumns(5);
      } else if (width >= 960) {
        setColumns(4);
      } else {
        setColumns(2);
      }
    }

    window.addEventListener('resize', updateColumns);
    updateColumns(); // 初始化调用一次

    return () => window.removeEventListener('resize', updateColumns);
  }, []);

  const gap = 16; // 卡片间间距(px)
  const cardWidth = `calc((100% - ${(columns - 1) * gap}px) / ${columns})`;

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${columns}, 1fr)`,
      gap: `${gap}px`,
      padding: '16px'
    }}>
      {products.map(product => (
        <ProductCard key={product.id} product={product} style={{ width: cardWidth }} />
      ))}
    </div>
  );
}

上述代码虽然实现了预期效果，但存在明显的问题：

• 性能开销：每次窗口大小变化都会触发重新渲染整个组件树。
• 逻辑耦合严重：布局逻辑分散在多个地方，难以统一管理。
• 维护困难：当新增断点或修改样式参数时，需同时更新 JS 和 CSS 文件。

二、解决方案设计

2.1 使用 CSS 自定义属性 + calc()

我们可以借助 CSS 的自定义属性（即 CSS Variables）配合 calc() 函数来简化逻辑处理过程。

步骤概述：

• 定义基础变量（如最大列数、卡片宽度等）
• 利用媒体查询自动切换不同分辨率下的列数
• 通过 calc() 计算剩余空间分配给各列
• 移除所有不必要的 JS 操作

2.2 改进后的代码结构

HTML 结构

<div class="product-grid">
  <!-- 商品卡片 -->
</div>

CSS 样式部分

.product-grid {
  --columns: 5; /* 默认列数 */
  --gap: 16px;

  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gap);
  padding: 16px;
}

@media (max-width: 1279px) and (min-width: 960px) {
  .product-grid {
    --columns: 4;
  }
}

@media (max-width: 959px) {
  .product-grid {
    --columns: 2;
  }
}

优点解析

• 所有响应式行为完全由 CSS 控制，无需额外监听事件；
• 更直观地表达了设计意图；
• 可复用性强，便于跨项目迁移；
• 易于调试和扩展新特性；

三、实践演示

让我们来看一个完整的例子：

示例：构建灵活的商品网格布局

我们将创建一个简单的商品列表页面，其中包含若干商品卡片，其排列方式随视口宽度变化而改变。

Step 1: 创建基础组件

import React from 'react';

const ProductCard = ({ product }) => {
  return (
    <div className="card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price.toFixed(2)}</p>
    </div>
  );
};

export default ProductCard;

Step 2: 主容器组件

import React from 'react';
import ProductCard from './ProductCard';

const products = [
  { id: 1, name: '苹果', price: 5.99, image: 'apple.jpg' },
  { id: 2, name: '香蕉', price: 2.49, image: 'banana.jpg' },
  // ...
];

const ProductGrid = () => {
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

export default ProductGrid;

Step 3: 添加样式文件

.product-grid {
  --columns: 5;
  --gap: 16px;

  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gap);
  padding: 16px;

  @media (max-width: 1279px) and (min-width: 960px) {
    --columns: 4;
  }

  @media (max-width: 959px) {
    --columns: 2;
  }
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: translateY(-4px);
  }

  img {
    width: 100%;
    height: auto;
  }

  h3 {
    font-size: 1rem;
    margin: 10px 0;
  }

  p {
    color: #666;
    font-weight: bold;
  }
}

四、深入剖析：为什么 CSS calc() 更优？

优势总结

• 减少 DOM 操作频率：避免频繁读取 window.innerWidth 并触发重排。
• 提升渲染性能：浏览器原生支持使得布局计算更加迅速。
• 增强代码可读性：将样式逻辑集中于一处，降低心智负担。
• 提高灵活性：未来添加更多断点只需追加 CSS 规则即可。

五、结语

在这篇文章中，我们通过对一个典型电商场景的实际重构，展示了如何运用 CSS 的强大功能——特别是 calc() 函数和自定义属性——来取代过去依赖 JavaScript 进行动态样式的旧模式。这不仅提升了前端性能，还让我们的代码变得更加清晰、健壮和易于后续迭代升级。

希望通过这次分享，能够帮助你在日常工作中发现更多可以被 CSS 替代的 JS 操作场景，进一步挖掘前端工程化的潜力。如果你也认同这种思路，不妨尝试将其应用于自己的项目之中吧！