CSS Modules问题：媒体查询中定义的compose覆盖了媒体查询外的样式

嘿，这个坑我之前踩过！核心问题出在CSS Modules的composes特性的工作时机上：它是在编译阶段就完成样式合并的，不是浏览器运行时根据媒体查询条件动态解析的。

原因解析 #

当你在媒体查询块里写composes: xs-text时，CSS Modules编译工具会直接把xs-text的所有样式属性提取出来，合并到.header类的样式里——完全无视外面的媒体查询条件。最终编译后的CSS代码里，xs-text的字体大小、行高等属性会直接成为.header的默认样式，而不是被包裹在@media块中。这就导致不管屏幕尺寸多大，xs-text的样式都会生效，覆盖掉原本的s-text。

解决方案 #

这里给你三种靠谱的解决思路，按推荐程度排序：

1. 使用CSS自定义属性（变量）最简洁

把字体相关的属性定义成全局变量，在媒体查询里直接切换变量值，完美适配响应式逻辑：

/* typography.css */
:root {
  /* 默认桌面端样式 */
  --text-font-size: 14px;
  --text-letter-spacing: -0.01px;
  --text-line-height: 16px;
}

/* 移动端覆盖变量 */
@media screen and (max-width: 600px) {
  :root {
    --text-font-size: 11px;
    --text-letter-spacing: -0.006px;
    --text-line-height: 14px;
  }
}

/* somefile.module.css */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 直接使用变量 */
  font-size: var(--text-font-size);
  letter-spacing: var(--text-letter-spacing);
  line-height: var(--text-line-height);
}

2. 在typography.css中封装响应式类

把媒体查询逻辑提前写到共享的typography文件里，定义一个包含响应式逻辑的类，然后直接composes这个类：

/* typography.css */
.s-text {
  font-size: 14px;
  letter-spacing: -0.01px;
  line-height: 16px;
}

.xs-text {
  font-size: 11px;
  letter-spacing: -0.006px;
  line-height: 14px;
}

/* 封装响应式类 */
.responsive-header-text {
  composes: s-text;
}

@media screen and (max-width: 600px) {
  .responsive-header-text {
    composes: xs-text;
  }
}

/* somefile.module.css */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  composes: responsive-header-text from '../../styles/shared/typography.css';
}

3. 结合JS动态切换类名适合框架项目

如果你的项目用React/Vue这类框架，可以通过JS监听屏幕尺寸变化，动态添加对应的类名：

// React示例
import styles from './somefile.module.css';
import typoStyles from '../../styles/shared/typography.css';
import { useState, useEffect } from 'react';

export default function Header() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 600);
    window.addEventListener('resize', handleResize);
    // 清理监听
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className={`${styles.header} ${isMobile ? typoStyles['xs-text'] : typoStyles['s-text']}`}>
      {/* 你的头部内容 */}
    </div>
  );
}

总结 #

优先选CSS变量的方案，它最符合CSS原生的响应式逻辑，也能和CSS Modules完美配合，不需要额外的JS逻辑。

内容的提问来源于stack exchange，提问作者ItzaMi