Tech Future主题开发完整教程 Part 2: 样式系统 – 我如何在3天内重构出可维护的CSS架构

LESS预处理器救了我的命，但差点让我失业

上周给一个金融科技公司做仪表盘项目时，我打开他们现有的CSS文件差点吐血 – 8765行未压缩的样式代码，全局作用域污染严重，!important满天飞。更可怕的是，他们的主题切换是通过直接操作DOM修改内联样式实现的，性能差到在低端设备上切换主题要3秒。

我决定用LESS重构整个样式系统。选择LESS而不是SASS纯粹是因为项目历史包袱 – 他们CI/CD流水线里已经有LESS的编译工具链。下面是我定义的核心变量文件：

// variables.less
// 主题色采用HSLA格式，方便程序化调整
@primary-hue: 210; // 主色调色相
@primary-saturation: 90%;
@primary-lightness: 50%;
@primary-alpha: 1;

// 动态生成主题色
.gen-primary-color(@mode: 'light') {
  @lightness: if(@mode = 'light', @primary-lightness, @primary-lightness - 15%);
  @color: hsla(@primary-hue, @primary-saturation, @lightness, @primary-alpha);
}

// 间距系统基于8px基准
@spacing-unit: 8px;
@spacing-1: @spacing-unit; // 8px
@spacing-2: @spacing-unit * 2; // 16px
// ...直到@spacing-10

结果编译时踩了个大坑：LESS 3.x的if()函数在循环中会缓存第一次计算的值。我花了整整6小时才搞明白为什么暗黑模式的颜色不变，最后用mixin替代函数解决了问题。

BEM命名规范？我改良了更适合主题系统的版本

传统BEM在主题系统中会生成过长的类名，比如button--primary--dark--large--disabled。我的解决方案是分层级管理：

// 基础组件样式（不可变）
.btn {
  padding: @spacing-2 @spacing-3;
  border-radius: 4px;
  
  // 状态修饰符
  &--disabled {
    opacity: 0.6;
  }
}

// 主题层（通过body类名控制）
.theme-dark {
  .btn {
    background: @color-dark-primary;
    
    &--primary {
      background: @color-dark-accent;
    }
  }
}

配合这个架构，我写了个Webpack插件自动提取主题关键CSS。最终产物从原来的187KB降到34KB，主题切换时间从3000ms降到120ms。

CSS-in-JS是个好主意，直到你需要支持IE11

项目有个奇葩需求要兼容IE11，我原本打算上styled-components，结果发现他们的polyfill会让包体积膨胀200KB。最终妥协方案是用CSS Modules + 自定义属性降级：

// button.module.less
:root {
  --primary-color: @primary-color;
}

.button {
  background: var(--primary-color, @primary-color-fallback);
  
  // IE11降级方案
  @media all and (-ms-high-contrast: none) {
    background: @primary-color-fallback;
  }
}

这个方案虽然丑，但实测在IE11上渲染速度快了3倍。我额外写了个PostCSS插件自动生成降级代码，开发体验才算能接受。

动态主题切换的性能陷阱：GPU加速的代价

为了实现丝滑的主题切换动画，我最初给所有颜色变化加了transition：

.theme-transition * {
  transition: background-color 300ms, color 300ms;
}

结果在低端安卓设备上直接卡成PPT。通过Chrome DevTools的Performance面板分析，发现大量重绘和层爆炸问题。最终方案是：

1. 只对前景色和背景色应用过渡
2. 使用will-change提前告知浏览器
3. 对移动端减少过渡时间到150ms

优化前后性能对比：

样式系统测试：我为什么给CSS写单元测试

被线上样式冲突搞怕了，我给核心组件写了视觉回归测试：

// button.test.js
describe('Button组件视觉测试', () => {
  before(() => {
    // 加载所有主题
    cy.loadTheme('light');
    cy.loadTheme('dark');
  });

  it('主按钮在亮暗主题下应有正确对比度', () => {
    cy.themeSnapshot('primary-button', {
      // 对比度至少4.5:1
      a11y: {
        'color-contrast': { enabled: true, level: 'AA' }
      }
    });
  });
});

这个测试在CI流水线里拦住了3次不符合WCAG标准的提交。虽然配置Cypress花了2天时间，但比起线上事故的善后成本简直不值一提。

主题配置器：让产品经理自己玩样式

产品团队总想微调主题色，我干脆做了个实时预览工具：

// ThemeConfigurator.jsx
function useThemeGenerator() {
  const [hue, setHue] = useState(210);
  
  // 基于色相生成完整调色板
  const generatePalette = useCallback(() => {
    return {
      primary: `hsl(${hue}, 90%, 50%)`,
      secondary: `hsl(${hue + 30}, 70%, 60%)`,
      // ...
    };
  }, [hue]);

  return { generatePalette, setHue };
}

这个工具后来被市场部滥用，产生了各种辣眼睛的配色方案。最后我不得不加上WCAG验证规则，自动拒绝对比度不足的配置。

// 基础变量层
@color-primary: #3a7bd5;
@color-secondary: #00d2ff;
@spacing-unit: 8px;

// 语义变量层
@background-primary: @color-primary;
@text-primary: @color-primary;

// 组件变量层
@button-primary-bg: @color-primary;
@card-padding: @spacing-unit * 3;

:root {
  --primary-color: #3a7bd5;
  --secondary-color: #00d2ff;
}

.dark-theme {
  --primary-color: #0f2027;
  --secondary-color: #2c5364;
}

// 编译时生成
.theme-light {
  .generate-theme(@light-colors);
}

.theme-dark {
  .generate-theme(@dark-colors);
}

.generate-theme(@colors) {
  @primary: @colors[primary];
  @secondary: @colors[secondary];
  
  .button-primary {
    background: @primary;
    &:hover {
      background: lighten(@primary, 10%);
    }
  }
}

/* 重构前的地狱代码 */
div#dashboard > div.container > div.row > div.col-md-9 > 
div.panel.panel-default > div.panel-body > 
div.tradingview-widget-container > div > div > div > canvas {
  border-radius: 4px !important;
}

.trading-view {
  &__container {
    position: relative;
    height: 400px;
  }
  
  &__canvas {
    border-radius: @border-radius-base;
    .depth-shadow(2);
  }
  
  // 移动端适配
  .mobile({
    &__container {
      height: 300px;
    }
  });
}

// 用纯色替代渐变
@mixin gradient-bg(@color) {
  // 旧方案：background: linear-gradient(to right, @color, lighten(@color, 15%));
  background: @color; // 性能提升40%
}

// 按主题分割字体
.theme-light {
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
}

.theme-dark {
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
}

// package.json
"scripts": {
  "lint:css": "stylelint 'src/**/*.less' --fix",
  "precommit": "npm run lint:css",
  "size-check": "bundlesize --config .bundlesizerc.json"
}

{
  "files": [
    {
      "path": "dist/*.css",
      "maxSize": "50 kB",
      "compression": "gzip"
    }
  ]
}

.article-content {
font-family: ‘Segoe UI’, system-ui, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}

.article-content h2 {
margin-top: 2em;
border-bottom: 1px solid #eee;
padding-bottom: 0.5em;
}

.article-content h3 {
margin-top: 1.5em;
color: #555;
}

.article-content pre {
background: #f8f8f8;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
margin: 1em 0;
}

.article-content code {
font-family: ‘SFMono-Regular’, Consolas, monospace;
font-size: 0.9em;
}

.article-content table.style-guide {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}

.article-content table.style-guide th,
.article-content table.style-guide td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}

.article-content table.style-guide th {
background-color: #f5f5f5;
}

.article-content ol,
.article-content ul {
margin-left: 1.5em;
padding-left: 1em;
}

.article-content li {
margin-bottom: 0.5em;
}

// 基础色板
@color-red-50: #FFEBEE;
@color-red-100: #FFCDD2;
// ...省略中间色阶
@color-red-900: #B71C1C;

// 语义化变量
@color-danger: @color-red-600;
@color-danger-hover: @color-red-700;
@color-danger-active: @color-red-800;

.button-factory(@bg, @color, @border) {
    background: @bg;
    color: @color;
    border: 1px solid @border;
    
    &:hover {
        background: darken(@bg, 8%);
    }
    // 其他状态...
}

.primary-button {
    .button-factory(@color-primary, white, @color-primary);
}

.danger-button {
    .button-factory(@color-danger, white, @color-danger);
}