前端进阶（12） - css 的弱化与 js 的强化

时间 2019-11-05 标签前端进阶 css 弱化强化

css 的弱化与 js 的强化

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

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

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。vue

2. 书写方式

通常 css in js 的写法有两种：react

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

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

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

好比 styled-components:es6

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:github

import { css } from 'emotion';

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

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

2.2 使用 js 对象 `{}`

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

好比 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)