css 的弱化与 js 的强化

web 的三要素 html, css, js 在前端组件化的过程中，比如 react、vue 等组件化框架的运用，使 html 的弱化与 js 的强化 成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成：css 的弱化与 js 的强化。

之前有写过一篇 CSS 模块化，但对 css in js 这种理念没有过多讲解，所以这次深入一下。

css in js 理念，即是摒弃原有的用 .css 文件书写样式，而把样式写进 js 里面，这样就可以做到一个组件对应一个文件、一个文件便是一个组件。

1. 支持的第三方库

styled-components: 仅支持 react
radium: 仅支持 react
emotion
aphrodite
polished
jss
glamorous: 仅支持 react
styled-jsx: 仅支持 react
glamor: 仅支持 react
styletron: 仅支持 react

更多第三方库可以参考 css-in-js。

2. 书写方式

一般 css in js 的写法有两种：

使用 es6 的模板字符串
使用 js 对象 {}

2.1 使用 `es6` 的模板字符串

styled-components、emotion、styled-jsx 都是采用的这种写法。

比如 styled-components:

import React from 'react';
import styled from 'styled-components';

// 创建一个使用 <h1> 标签的 <Title> React 组件
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个使用 <section> 标签的 <Wrapper> React 组件
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 就像正常的 React 组件一样，只不过他们都自带样式
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

比如 emotion:

import { css } from 'emotion';

const app = document.getElementById('root');
const myStyle = css`
  color: rebeccapurple;
`;
app.classList.add(myStyle);

这种写法的好处是，通过编辑器插件和 lint 插件（如 stylelint），就像写正常的 css 一样，有自动完成提示、错误提示、lint 自动矫正等功能。

2.2 使用 js 对象 `{}`

radium、aphrodite、polished、jss、glamorous、glamor、styletron 都是采用的这种写法。

比如 radium:

import Radium from 'radium';
import React from 'react';
import color from 'color';

var styles = {
  base: {
    color: '#fff',
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    }
  },
  primary: {
    background: '#0074D9'
  },
  warning: {
    background: '#FF4136'
  }
};

class Button extends React.Component {
  render() {
    return (
      <button
        style={[styles.base, styles[this.props.kind]]}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);

<Button kind="primary">Primary</Button>
<Button kind="warning">Warning</Button>

比如 aphrodite:

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  red: {
    backgroundColor: 'red'
  },
  blue: {
    backgroundColor: 'blue'
  },
  hover: {
    ':hover': {
      backgroundColor: 'red'
    }
  },
  small: {
    '@media (max- 600px)': {
      backgroundColor: 'red',
    }
  }
});

class App extends Component {
  render() {
    return <div>
      <span className={css(styles.red)}>
        This is red.
      </span>
      <span className={css(styles.hover)}>
        This turns red on hover.
      </span>
      <span className={css(styles.small)}>
        This turns red when the browser is less than 600px width.
      </span>
      <span className={css(styles.red, styles.blue)}>
        This is blue.
      </span>
      <span className={css(styles.blue, styles.small)}>
        This is blue and turns red when the browser is less than 600px width.
      </span>
    </div>;
    }
}

这种写法的好处是，不需要 es6 的语法，对属性可以更方便的操作。

3. 决定是否使用

如果你是喜欢把样式和组件分开书写，那么这种方式就可能不太适合你；如果你追求一个组件对应一个文件、一个文件便是一个组件，那就立马用上吧。

4. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

前端进阶（12）