前端進階（12） - css 的弱化與 js 的強化

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許可證）