css 的弱化與 js 的強化

web 的三要素 html, css, js 在前端元件化的過程中，比如 react、vue 等元件化框架的運用，使 html 的弱化與 js 的強化 成為了一種趨勢，而在這個過程中，其實還有另一種趨勢也在慢慢形成：css 的弱化與 js 的強化。

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

css in js 理念，即是摒棄原有的用 .css 檔案書寫樣式，而把樣式寫進 js 裡面，這樣就可以做到一個元件對應一個檔案、一個檔案便是一個元件。

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`;

// 建立一個使用 <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-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. 決定是否使用

如果你是喜歡把樣式和元件分開書寫，那麼這種方式就可能不太適合你；如果你追求一個元件對應一個檔案、一個檔案便是一個元件，那就立馬用上吧。

4. 後續

更多部落格，檢視 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）