如何遍历页面未使用的text-style-开头CSS类名？（HTML/JS/CSS/SASS）

要解决这个问题，核心思路是先获取所有定义的text-style-类，再对比页面实际用到的类，找出差集。以下是两种适合你的实现方案，均基于HTML/JS/CSS/SASS，无需shell脚本：

方案一：纯前端JS实时检测（无需构建工具） #

直接在浏览器端解析样式表，提取目标类并与页面已用类对比，适合快速验证。

步骤1：提取所有定义的text-style-类 #

遍历页面所有样式表，筛选出以.text-style-开头的类选择器：

function getAllTextStyleClasses() {
  const styleClasses = new Set();
  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 跳过跨域无法访问的样式表
      for (const rule of sheet.cssRules) {
        if (rule.type === CSSRule.STYLE_RULE) {
          // 拆分多选择器（比如 .a, .b { ... }）
          const selectors = rule.selectorText.split(',').map(s => s.trim());
          selectors.forEach(selector => {
            if (selector.startsWith('.text-style-')) {
              const className = selector.slice(1); // 移除开头的.
              styleClasses.add(className);
            }
          });
        }
      }
    } catch (e) {
      console.warn('无法读取样式表:', sheet.href, e);
    }
  }
  return styleClasses;
}

步骤2：收集页面已使用的所有类 #

遍历页面所有元素，提取并去重类名：

function getUsedClasses() {
  const usedClasses = new Set();
  document.querySelectorAll('*').forEach(el => {
    el.classList.forEach(cls => usedClasses.add(cls));
  });
  return usedClasses;
}

步骤3：对比得出未使用的类 #

function findUnusedTextStyleClasses() {
  const allTextStyle = getAllTextStyleClasses();
  const used = getUsedClasses();
  const unused = [...allTextStyle].filter(cls => !used.has(cls));
  
  console.log('未使用的text-style类:', unused);
  // 也可以把结果渲染到页面上方便查看
  const resultEl = document.createElement('div');
  resultEl.style.cssText = 'position:fixed;top:10px;right:10px;background:white;padding:10px;border:1px solid #ccc;z-index:9999';
  resultEl.innerHTML = `<h3>未使用的text-style类</h3><ul>${unused.map(cls => `<li>${cls}</li>`).join('')}</ul>`;
  document.body.appendChild(resultEl);
  
  return unused;
}

// 页面加载完成后执行
window.addEventListener('load', findUnusedTextStyleClasses);

注意点 #

• 无法读取跨域加载的样式表（CDN样式等），这类样式表的类需要手动补充或用方案二处理
• 动态添加的类（比如JS交互后才挂载的类）需在类添加完成后重新调用检测函数

方案二：结合SASS构建时生成类列表（更可靠） #

利用SASS的变量管理能力，提前收集所有text-style-类，编译时导出给JS使用，避免解析样式表的问题。

步骤1：在SASS中统一管理类列表 #

将所有text-style-类存入SASS列表，通过:export导出为JS可读取的变量（需构建工具支持，比如Webpack的sass-loader）：

// 统一管理所有text-style类
$text-style-classes: (
  text-style-primary,
  text-style-secondary,
  text-style-muted,
  text-style-highlight,
  // 新增类直接添加到这里
);

// 导出为JS变量
:export {
  textStyleClasses: $text-style-classes;
}

// 原有样式定义
@each $class in $text-style-classes {
  .#{$class} {
    // 原样式逻辑
    color: #000;
  }
}

步骤2：JS中导入并对比 #

// 导入SASS导出的类列表
import { textStyleClasses } from './your-styles.scss';

// 转换为Set便于对比
const allTextStyle = new Set(textStyleClasses.split(','));

// 复用方案一的getUsedClasses函数
const used = getUsedClasses();
const unused = [...allTextStyle].filter(cls => !used.has(cls));

console.log('未使用的text-style类:', unused);

优势 #

• 无需解析样式表，避免跨域问题
• SASS统一管理类，新增/删除类时自动同步，不会遗漏
• 构建阶段即可提前发现问题，配合CI/CD可自动化检测

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