摘要:一切樣式都是全局,產生的各種命名的痛苦,等命名規則能解決一部分問題,但當你使用三方插件時卻無法避免命名沖突。這一解決法的優雅在于,全局的可以正常使用,只有帶后綴的才會被化使用的模板字符串,在文件里寫純粹的。
前言
團隊在使用react時,不斷探索,使用了很多不同的css實現方式,此篇blog總結了,react項目中常見的幾種css解決方案:inline-style/radium/style-component,只列舉了團隊項目中用過的一下實現方式,還有其他的不過多展開
css的不足
樣式與狀態相關的情況越來越多,需要動態、能直接訪問組件state的css。
一切樣式都是全局,產生的各種命名的痛苦,BEM等命名規則能解決一部分問題,但當你使用三方插件時卻無法避免命名沖突。
Vue怎么解決
scoped 屬性
動態css的語法 v-bind class style
react中使用css的標準
是否解決了React開發的痛點:局部css,動態css?
是否支持所有css甚至是sass用法?偽類,嵌套,動畫,媒體查詢?
是否兼容你需要使用的第三方UI庫?
是否能和純css,或者是其他css框架很好共存,以備遇到特殊情況可以有方案B?
性能?大小?
react 原生css
inline style
const textStyles = { color: "white", backgroundColor: this.state.bgColor };inline style
缺點:
發明了一套新的 css-in-js 語法,使用駝峰化名稱等一些規則 不支持所有的 css,例如 media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). inline 寫法如果直接同行寫影響代碼閱讀,不清晰優雅
Radium
Features:
Conceptually simple extension of normal inline styles 原生css擴展,改良版
Browser state styles to support :hover, :focus, and :active 支持瀏覽器樣式
Media queries 支持媒體查詢
Automatic vendor prefixing 自動組件前綴 scope
Keyframes animation helper 寫動畫更方便,封裝Keyframes
ES6 class and createClass support 支持react類和createClass的寫法
簡單使用:
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 等打包工具的開發環境
{ loader: "css-loader", options: { importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" // 為了生成類名不是純隨機 }, }, import styles from "./table.css"; render () { return; } /* table.css */ .table {} .row {} .cell {}A0B0
缺點:
class名必須是駝峰形式,否則不能正常在js里使用 styles.table 來引用 由于css模塊化是默認,當你希望使用正常的全局css時,需要通過:local 和 :global 切換,不方便 所有的 className 都必須使用 {style.className} 的形式 寫在外部樣式文件中,無法處理動態css
優化:
babel-plugin-react-css-modules 可以照常寫 "table-size" 之類帶橫杠的類名 正常書寫字符串類名,不用加style前綴
// .bablerc { "plugins": [ ["react-css-modules", { // options }] ] }
缺點:
不過使用 styleName 遇到三方UI庫該怎么辦呢
補充:
create-react-app v2 直接使用css-moudues和sass
使用方法為一律將css文件命名為 XXX.modules.css, 以上例,即為 table.modules.css, 即可使用。這一解決法的優雅在于,全局的css可以正常使用,只有帶.modules.css后綴的才會被modules化
styled-components
使用 ES6 的模板字符串,在js文件里寫純粹的css。
補充sass常用語法
變量:以$開頭/變量需要在字符串之中,在#{}之中
計算: 屬性可以使用算式
嵌套: &引用父元素
繼承: @extend
重用: @mixin命令,定義一個代碼塊(可以傳參數)/@include命令,調用這個mixin
引入文件: @import
// 變量 $blue : #1875e7; $side : left; div { color : $blue; } .rounded { border-#{$side}-radius: 5px; } // 計算 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"
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114185.html
摘要:能最大化地結合現有生態預處理器后處理器等和模塊化能力,幾乎零學習成本。編碼相關的所有樣式上例中打印的結果是注意到是按照自動生成的名。實踐手動引用渲染結果使用可以實現使用屬性自動加載模塊。 文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風生水起,CSS作為前端的三劍客之一,各種技術方案也是層出不窮。從CSS prepocessor(SASS、LESS、Styl...
摘要:面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為,有哪些一般人我都告訴他,但是他都不聽的忠告如何面試前端工程師 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要:在他的重學前端課程中提到到現在為止,前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識,其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙,深度廣度一樣都不能差。 開篇 前端開發是一個非常特殊的行業,它的歷史實際上不是很長,但是知識之繁雜,技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到: 到現在為止,前端工程師已經成為研...
摘要:在他的重學前端課程中提到到現在為止,前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識,其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙,深度廣度一樣都不能差。開篇 前端開發是一個非常特殊的行業,它的歷史實際上不是很長,但是知識之繁雜,技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到: 到現在為止,前端工程師已經成為研發體系...
摘要:如其他屬性及方法,詳細可以查看跨終端能力跨終端能力是最大的特點。在指定區域的事件中,通過對象的屬性,即可獲得文件列表信息,如打印文件名在中實踐在項目中使用,依然遵循數據驅動的原則,即事件數據更新。同時,在事件中執行判斷。最近有個需求,需要產品導航欄支持拖放。 雖然開源社區已有不少成熟的拖放庫,但考慮到代碼可控性和可定制性,還是自己寫吧。 選型 關于選型,前端實現拖放功能,無外乎幾種: 1、通...
閱讀 2079·2021-09-29 09:35
閱讀 674·2021-09-08 09:36
閱讀 3389·2021-09-03 10:30
閱讀 2109·2019-08-30 14:21
閱讀 2905·2019-08-30 11:18
閱讀 3306·2019-08-29 17:31
閱讀 3136·2019-08-29 17:29
閱讀 1300·2019-08-29 17:13