如何在 React 里面方便的写 CSS Modules

[func-star]

背景

在多人跨团队开发的项目中，CSS 全局污染经常是我们一个非常头疼的问题，通常我们会有以下两种做法：

• 一种是依靠人为约定的形式，通过给 class 携带命名空间，来避免 class 冲突，当然我们也可以写插件来检测命名是否符合规范。
• 另一种就是越来越被大家接受的 CSS Modules，其局部作用域和模块依赖的概念确实一定程度上解决了我们这个头疼的问题。

然而，CSS Modules 在解决这个问题的同时，也给我们带来了额外的代码成本。

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

从上述代码可以看出 CSS Modules 要求我们采用className={style.title}这种方式，而不是往常的className='title'这种形式来书写 class。 当项目复杂起来之后，你会觉得维护一坨一坨这样的代码会觉得比较恶心，至少视觉上的效果就没有以前那么简洁明了

那么有没有办法让我们维持原来的写法，却能拥有 CSS Modules 的特性，甚至赋于一些条件判断、变量识别、循环读取这些能力呢？

解决方式

接下来我们介绍一下 @monajs/babel-plugin-react-css-modules 这款 babel 插件，它就是为了解决上述问题而专门设计的，它允许我们以多种姿势来书写 CSS Modules。

git项目地址

字符串形式

const a2 = (
    <div className='ssss fds ss'>
        <div>{events.on}</div>
    </div>
)

数组形式

const b1 = (
    <div className={['aaa', 'bbb']}>
        <div>{events.on}</div>
    </div>
)

const b2 = (
    <div className={['aaa', bbb, { 'bbb': this.isShow, ccc: true, 'ddd': false }]}>
        <div>{events.on}</div>
    </div>
)

const b3 = (
    <div className={[this.classname(), { 'fd-ssss-fdfdfd': true }, 'sss-dd-dd']}>
        <div>{events.on}</div>
    </div>
)

json形式

const c1 = (
    <div className={{ 'aaa': true }}>
        <div>{events.on}</div>
    </div>
)

const c2 = (
    <div className={{ 'aaa': true, bbb: events }}>
        <div>{events.on}</div>
    </div>
)

const c3 = (
    <div className={{ 'aaa': true, bbb: this.ctrl.isShow, 'ccc': this.showClassname() }}>
        <div>{events.on}</div>
    </div>
)