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

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

1.支持的第三方库

1. ：仅支持react
2. ：仅支持react
7. ：仅支持react
8. ：仅支持react
9. ：仅支持react
10. ：仅支持react

更多第三方库可以参考。

书写方式

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

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

2.1使用es6的模板字符串

，，都是采用的这种写法。

比如styled-components：

import React from 'react';import styled from 'styled-components';// 创建一个使用 
 标签的 
     
       标签的 
      
        React 组件const Wrapper = styled.section`  padding: 4em;  background: papayawhip;`;// 就像正常的 React 组件一样，只不过他们都自带样式
         
        
       
      
     

比如emotion：

import { css } from 'emotion';const app = document.getElementById('root');const myStyle = css`  color: rebeccapurple;`;app.classList.add(myStyle);

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

2.2使用js对象 {}

，，，，，，都是采用的这种写法。

比如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 (              {this.props.children}          );  }}Button = Radium(Button);PrimaryWarning

比如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 
    
      
             This is red.            
             This turns red on hover.            
             This turns red when the browser is less than 600px width.            
             This is blue.            
             This is blue and turns red when the browser is less than 600px width.          
    
;    }}

这种写法的好处是，不需要es6的语法，对属性可以更方便的操作。

3.决定是否使用

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

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