2019年给前端的5个建议（三）

三、回归 Sass/Less
2015 年我们就开始实践 CSS Modules，包括后来的 styled-components 等，到 2019 年 css-in-js 方案依旧争论不休，虽然它确实解决了一些 CSS 语言天生的问题，但同时增加了不少成本，新手不够友好、全局样式覆盖成本高涨、伪类处理复杂、与AntD等组件库结合有坑。与此同时 Sass/Less 社区也在飞速发展，尤其是 Stylelint 的成熟，可以通过技术约束的手段来避免 CSS 的 Bad Parts。

全局污染：约定每个样式文件只能有一个顶级类，如 .home-page{ .top-nav {//}, .main-content{ // } }。如果有多个顶级类，可以使用 Stylelint rule 检测并给出警告。
依赖管理不彻底。借助 webpack 的 css-loader，已够用。
JS 和 CSS 变量共享。关于 JS 和 Sass/Less 变量共享，我们摸索出了自己的解法：

src/styles/variables.js

module.exports = {
  // 主颜色
  'primary-color': '#0C4CFF',
  // 出错颜色
  'error-color': '#F15533',
  // 成功颜色
  'success-color': '#35B34A',
};

以下为 Webpack 配置，注入变量到 Scss

webpack.config.js

const styleVariables = require('src/styles/variables');

// ...
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&minimize',
          {
            loader: 'sass-loader',
            options: {
              data: Object.keys(styleVariables)
                .map(key => `\$${key}: ${styleVariables[key]};`)
                .join('\n'),
              sourceMap: true,
              sourceMapContents: true
            }
          }
        ]
      }
//...

在 scss 文件中，可以自己引用变量

page.scss

.button {
  background: $primary-color;
}