css 的弱化與 js 的強(qiáng)化

web 的三要素 html, css, js 在前端組件化的過程中，比如 react、vue 等組件化框架的運(yùn)用，使 html 的弱化與 js 的強(qiáng)化 成為了一種趨勢，而在這個(gè)過程中，其實(shí)還有另一種趨勢也在慢慢形成：css 的弱化與 js 的強(qiáng)化。

之前有寫過一篇 CSS 模塊化，但對 css in js 這種理念沒有過多講解，所以這次深入一下。

css in js 理念，即是摒棄原有的用 .css 文件書寫樣式，而把樣式寫進(jìn) js 里面，這樣就可以做到一個(gè)組件對應(yīng)一個(gè)文件、一個(gè)文件便是一個(gè)組件。

1. 支持的第三方庫

1. styled-components: 僅支持 react
2. radium: 僅支持 react
3. emotion
4. aphrodite
5. polished
6. jss
7. glamorous: 僅支持 react
8. styled-jsx: 僅支持 react
9. glamor: 僅支持 react
10. styletron: 僅支持 react

更多第三方庫可以參考 css-in-js。

2. 書寫方式

一般 css in js 的寫法有兩種：

1. 使用 es6 的模板字符串
2. 使用 js 對象 {}

2.1 使用 es6 的模板字符串

styled-components、emotion、styled-jsx 都是采用的這種寫法。

比如 styled-components:

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

// 創(chuàng)建一個(gè)使用 <h1> 標(biāo)簽的 <Title> React 組件
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 創(chuàng)建一個(gè)使用 <section> 標(biāo)簽的 <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 一樣，有自動完成提示、錯(cuò)誤提示、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-width: 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. 決定是否使用

如果你是喜歡把樣式和組件分開書寫，那么這種方式就可能不太適合你；如果你追求一個(gè)組件對應(yīng)一個(gè)文件、一個(gè)文件便是一個(gè)組件，那就立馬用上吧。

4. 后續(xù)

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

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）