為什么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 (<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 ，群里不停更新最新的教程和學習方法，加入一起學習與交流

?

轉載于:https://my.oschina.net/zybc/blog/2206269

總結

以上是生活随笔為你收集整理的前端进阶 -css的弱化与js的强化（11）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。