React里css的隔离

背景

React官方没有规定在React应用里应该如何写css，虽然官方教程里多数是写的inline-css，但是官方并不推荐这样做，其中一个原因是性能没有单独写成class的好。

官方给的建议也是单独写一个css文件，然后在js里引用。但是这样会有一个css全局污染问题。

 

现状

为了让css隔离在一个React组件里，大家给出了很多方案，下面是一些介绍的文章：

React 组件中如何组织 CSS

React组件设计实践总结03 - 样式的管理

React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （上）

笔者不太喜欢css-in-js的方案（增加了概念），于是尝试了css-modules方案，但是每个className都需要写一个styles.实在是浪费键盘。

笔者从vue文件的scoped思路得到启发。

我们可以使用scss的嵌套语法和CSS 属性选择器来简单实现隔离。

比如js文件里这样写：

function App() {
  return (
    <div className="app" data-component="app">
      <div className="content">
        <p className="title">标题</p>
        <p className="text">隔离css</p>
      </div>
    </div>
  );
}

scss文件里这样写

[data-component=app] {
  .content {
    padding: 20px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .text {
      font-size: 16px;
      color: #333333;
    }
  }
}

data-component可以限制为每个组件的名字，因为className可能会出现重复，但是组件名字在同一个项目中基本不会重复。

这样就解决了css class全局污染的问题。简单易用，不用引入新的概率和扩展。create-react-app脚手架默认也支持引入scss。

 

思考

1、为什么不用id来标示呢？

因为组件可能在多处进行渲染。

2、css-modules不值得使用吗？

也不是，看个人喜好，它默认都是局部，写全局要加前缀（又是新概念）。笔者认为一些不是关键点的新概念不必要都花时间去学习和实践。