前端进阶(12) - css 的弱化与 js 的强化

css 的弱化与 js 的强化

web 的三要素 html, css, js 在前端组件化的过程中,比如 reactvue 等组件化框架的运用,使 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-componentsemotionstyled-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 对象 {}

radiumaphroditepolishedjssglamorousglamorstyletron 都是采用的这种写法。

比如 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许可证

本文转载于:前端进阶(12) - css 的弱化与 js 的强化

上一篇:IfcStyledItem


下一篇:Reorder List