React項(xiàng)目 - 幾種CSS實(shí)踐

princekin 發(fā)布于2019-08-29 17:13 / 1310人閱讀

摘要：一切樣式都是全局，產(chǎn)生的各種命名的痛苦，等命名規(guī)則能解決一部分問題，但當(dāng)你使用三方插件時(shí)卻無法避免命名沖突。這一解決法的優(yōu)雅在于，全局的可以正常使用，只有帶后綴的才會(huì)被化使用的模板字符串，在文件里寫純粹的。

前言
團(tuán)隊(duì)在使用react時(shí)，不斷探索，使用了很多不同的css實(shí)現(xiàn)方式，此篇blog總結(jié)了，react項(xiàng)目中常見的幾種css解決方案：inline-style/radium/style-component，只列舉了團(tuán)隊(duì)項(xiàng)目中用過的一下實(shí)現(xiàn)方式，還有其他的不過多展開

css的不足
樣式與狀態(tài)相關(guān)的情況越來越多，需要?jiǎng)討B(tài)、能直接訪問組件state的css。
一切樣式都是全局，產(chǎn)生的各種命名的痛苦，BEM等命名規(guī)則能解決一部分問題，但當(dāng)你使用三方插件時(shí)卻無法避免命名沖突。

Vue怎么解決
scoped 屬性
動(dòng)態(tài)css的語(yǔ)法 v-bind class style

react中使用css的標(biāo)準(zhǔn)
是否解決了React開發(fā)的痛點(diǎn)：局部css，動(dòng)態(tài)css？
是否支持所有css甚至是sass用法？偽類,嵌套，動(dòng)畫，媒體查詢？
是否兼容你需要使用的第三方UI庫(kù)？
是否能和純css，或者是其他css框架很好共存，以備遇到特殊情況可以有方案B？
性能？大小？

react 原生css
inline style

const textStyles = {
  color: "white",
  backgroundColor: this.state.bgColor
};

inline style

缺點(diǎn)：

發(fā)明了一套新的 css-in-js 語(yǔ)法，使用駝峰化名稱等一些規(guī)則
不支持所有的 css，例如 media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!).
inline 寫法如果直接同行寫影響代碼閱讀，不清晰優(yōu)雅

Radium
Features：
Conceptually simple extension of normal inline styles 原生css擴(kuò)展，改良版
Browser state styles to support :hover, :focus, and :active 支持瀏覽器樣式
Media queries 支持媒體查詢
Automatic vendor prefixing 自動(dòng)組件前綴 scope
Keyframes animation helper 寫動(dòng)畫更方便，封裝Keyframes
ES6 class and createClass support 支持react類和createClass的寫法

簡(jiǎn)單使用：



import Radium from "radium";
import React from "react";
import color from "color";

class Button extends React.Component {
  static propTypes = {
    kind: PropTypes.oneOf(["primary", "warning"]).isRequired
  };

  render() {
    return (
      
    );
  }
}

// 使用了HOC的方式注入樣式
// Radium"s primary job is to apply interactive or media query styles, but even // if you are not using any special styles, the higher order component will still:

// Merge arrays of styles passed as the style attribute
// Automatically vendor prefix the style object
// Radium(config)(component) 還可以傳入一些配置
Button = Radium(Button);

var styles = {
  base: {
    color: "#fff",
    ":hover": {
      background: color("#0074d9").lighten(0.2).hexString()
    }
  },

  primary: {
    background: "#0074D9"
  },

  warning: {
    background: "#FF4136"
  }
};

keyframes使用

class Spinner extends React.Component {
  render () {
    return (
      
        
      
    );
  }
}

Spinner = Radium(Spinner);

var pulseKeyframes = Radium.keyframes({
  "0%": {width: "10%"},
  "50%": {width: "50%"},
  "100%": {width: "10%"},
}, "pulse");

var styles = {
  inner: {
    // Use a placeholder animation name in `animation`
    animation: "x 3s ease 0s infinite",
    // Assign the result of `keyframes` to `animationName`
    animationName: pulseKeyframes,
    background: "blue",
    height: "4px",
    margin: "0 auto",
  }
};

Css Modules
適用于所有使用 webpack 等打包工具的開發(fā)環(huán)境

{
  loader: "css-loader",
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]___[hash:base64:5]"  // 為了生成類名不是純隨機(jī)
  },
},

import styles from "./table.css";

    render () {
        return 
            
                A0
                B0
            
        ;
    }

/* table.css */
.table {}
.row {}
.cell {}

缺點(diǎn)：

class名必須是駝峰形式，否則不能正常在js里使用 styles.table 來引用
由于css模塊化是默認(rèn)，當(dāng)你希望使用正常的全局css時(shí)，需要通過:local 和 :global 切換，不方便
所有的 className 都必須使用 {style.className} 的形式
寫在外部樣式文件中，無法處理動(dòng)態(tài)css

優(yōu)化：

 babel-plugin-react-css-modules
 可以照常寫 "table-size" 之類帶橫杠的類名
 正常書寫字符串類名，不用加style前綴

// .bablerc
{
  "plugins": [
    ["react-css-modules", {
      // options
    }]
  ]
}

缺點(diǎn)：

不過使用 styleName 遇到三方UI庫(kù)該怎么辦呢

補(bǔ)充：
create-react-app v2 直接使用css-moudues和sass
使用方法為一律將css文件命名為 XXX.modules.css, 以上例，即為 table.modules.css, 即可使用。這一解決法的優(yōu)雅在于，全局的css可以正常使用，只有帶.modules.css后綴的才會(huì)被modules化

styled-components
使用 ES6 的模板字符串，在js文件里寫純粹的css。

補(bǔ)充sass常用語(yǔ)法

變量：以$開頭/變量需要在字符串之中，在#{}之中
計(jì)算: 屬性可以使用算式
嵌套: &引用父元素
繼承: @extend
重用: @mixin命令，定義一個(gè)代碼塊(可以傳參數(shù))/@include命令，調(diào)用這個(gè)mixin
引入文件: @import

// 變量
    $blue : #1875e7;
    $side : left;
    div {
　　    color : $blue;
    }
    .rounded {
　      border-#{$side}-radius: 5px;
    }

// 計(jì)算
   body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

// 嵌套
   a {
　　　　&:hover { color: #ffb3ff; }
　　}

// 繼承
    .class1 {
　　　　border: 1px solid #ffffd;
　　}
    .class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

// 重用
    @mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
    div {
　　　　@include left(20px);
　　}

//引入外部文件
    @import "path/filename.scss"