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

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

1.支持的第三方库

1. styled-components：仅支持react
2. radium：仅支持react
3. 情感
4. 阿芙罗狄蒂
5. 光
6. JSS
7. 魅力四射：仅支持react
8. styled-jsx：仅支持react
9. 魅力：仅支持react
10. styletron：仅支持react

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

书写方式

一般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对象 {}

镭，阿芙罗狄蒂，抛光，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 (<buttonstyle={[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.决定是否使用

如果你是喜欢把样式和组件分开书写，那么这种方式就可能不太适合你;如果你追求一个组件对应一个文件，一个文件便是一个组件，那就立马用上吧。

在这里给大家分享一下，我是一名5年前端工程师，自己建了一个q群：731771211 ，群里不停更新最新的教程和学习方法，加入一起学习与交流