前端進階（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許可證）