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

最新推荐文章于 2023-05-07 09:20:53 发布

weixin_33889665

最新推荐文章于 2023-05-07 09:20:53 发布

阅读量92

点赞数

原文链接：https://my.oschina.net/zybc/blog/2206269

版权

为什么80%的码农都做不了架构师？>>>

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

css in js理念，即摒弃的英文原有的用.css文件书写样式，而样式把写进js里面，这样就可以做到一个组件对应一个文件，一个文件便是一个组件。

1.支持的第三方库

styled-components：仅支持react
radium：仅支持react
情感
阿芙罗狄蒂
光
JSS
魅力四射：仅支持react
styled-jsx：仅支持react
魅力：仅支持react
styletron：仅支持react

更多第三方库可以参考css-in-js。

书写方式

一般css in js的写法有两种：

使用es6的模板字符串
使用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对象 `{}`

镭，阿芙罗狄蒂，抛光，jss，魅力四射，魅力，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的语法，对属性可以更方便的操作。