資訊專欄INFORMATION COLUMN
摘要：也可以和預(yù)處理器混用目前看下來，它只對(duì)名做哈希，也就是說然而這個(gè)算是一個(gè)有意思的方式，首先它依賴于，而并不局限于的開發(fā)，任何前端項(xiàng)目都可以使用，那么就也都可以使用的概念，不知道這個(gè)會(huì)有怎么樣的發(fā)展，感覺可以嘗試。
React的組件式開發(fā)，讓我們可以利用其Component Model，專注于單個(gè)組件的邏輯開發(fā)，其中還包括組織組件的樣式。先聲明，本文并不是webpack配置教程，不會(huì)介紹詳細(xì)的配置過程，假設(shè)你們已經(jīng)用過了css-loader style-loader extract-text-webpack-plugin。
正在使用的方式我們理想中的文件結(jié)構(gòu)可能會(huì)是這樣的：
- components
- modal
- modal.jsx
- modal.css // 可以是任意預(yù)處理器
- dropdown
- dropdown.jsx
- dropdown.css
然而，js現(xiàn)在可以做模塊化，css并不行，所有css的定義都可以被視為全局變量，在css被打包后，一個(gè)組件的樣式有可能會(huì)影響到其他組件，于是我們可以通過命名約定（name convention）來曲線救國（這一點(diǎn)并不局限于react開發(fā)）。
@modal-prefix: modal;
.@{modal-prefix} {
}
.@{modal-prefix}-title {
}
類似于上面的使用less的方式，在文件頂部先定義個(gè)類的前綴，來盡量避免命名沖突的可能。于是在組件中就可以這樣做
import React from "react";
import "./modal.less";
export default React.createClass({
render () {
return
Hello
;
}
});
上面就是我現(xiàn)在在用的方式，利用命名約定做到了偽模塊化（其實(shí)即便不是在使用react開發(fā)項(xiàng)目，也會(huì)用類似的方式）。
CSS in JS之前看到過一個(gè)ppt：https://speakerdeck.com/vjeux/react-css-in-js，談到了類似的問題。
一個(gè)方向是把樣式也直接寫進(jìn)組件里，即使用inline style。首先，直接用傳統(tǒng)的inline style并不可取，它對(duì)屬性的支持有限，比如不能用偽類、多個(gè)不同瀏覽器前綴的相同屬性、媒體查詢、動(dòng)畫等。至于重用樣式而言，在react中倒是還行：將需要重用的樣式對(duì)象作為模塊導(dǎo)出即可。
其實(shí)大家很努力地希望CSS in JS可以實(shí)現(xiàn)，比如：
react-style
github地址
它的局限就是上面提到過的屬性支持的問題，沒有細(xì)究這個(gè)東西，不太喜歡。
local scoped CSShttps://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope
用這個(gè)東西現(xiàn)在是webpack官方支持的，已在css-loader中實(shí)現(xiàn)，可以真正讓你的css代碼作為本地聲明，類似的代碼：
// style.css
:local(.title) { background: red; }
在需要這份樣式的組件里引入這個(gè)模塊：
import styles from "style.css"
首先css的語法中是不支持這個(gè):local()的，我們先看看頁面最終的代碼：
Info
到這里應(yīng)該明白了，其實(shí)這也算是個(gè)預(yù)處理器，它將:local(.title)的類名變成了一個(gè)哈希值，僅可以通過模塊導(dǎo)入的方式來獲取這個(gè)哈希值并應(yīng)用到組件上（生成的類名是可以配置的）?，F(xiàn)在css-loader可以通過添加module選項(xiàng)（詳細(xì)內(nèi)容可以參考上面CSS Modules的鏈接）使得css默認(rèn)定義的是local scoped的，希望共享的可以用:global()定義。
也可以和預(yù)處理器混用：
:global {
.global-class-name {
color: green;
}
}
目前看下來，它只對(duì)class名做哈希，也就是說：
:local(.title span) // .[hash] span
然而
:local(.title .name) // .[hash0] .[hash1]
這個(gè)算是一個(gè)有意思的方式，首先它依賴于webpack，而webpack并不局限于React的開發(fā)，任何前端項(xiàng)目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道這個(gè)CSS Modules會(huì)有怎么樣的發(fā)展，感覺可以嘗試。
這里是一個(gè)使用樣例：https://github.com/css-modules/webpack-demo
寫在最后的話目前的探索結(jié)果暫時(shí)是這樣，之后可能會(huì)繼續(xù)來填坑。反正現(xiàn)在應(yīng)該不會(huì)去用CSS in JS，CSS Modules可以一試，因?yàn)?b>css-loader這個(gè)插件基本react的項(xiàng)目里都會(huì)使用，寫好的組件一個(gè)import， 樣式和組件都有了，不過仍需實(shí)踐。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116376.html
摘要：一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來的隨著越來越多的功能加入項(xiàng)目代碼就會(huì)變得越來越難以控制本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織讓項(xiàng)目具備可維護(hù)性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態(tài)管理目錄組件設(shè)計(jì)的基本原則基本原則高 一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來的, 隨著越來越多的功能加入項(xiàng)目, 代碼就會(huì)變得越來越難以控制. 本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組...
摘要：發(fā)布是由團(tuán)隊(duì)開源的，操作接口庫，已成為事實(shí)上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊(cè)2019 Cody Lindley 編著 原文地址 本手冊(cè)由Frontend Masters贊助，通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊(cè)2019 Cody Lindley 編著 原文地址 本手冊(cè)由Frontend Masters贊助，通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載：PDF ...
閱讀 2479·2021-10-11 10:57
閱讀 1346·2021-10-09 09:59
閱讀 2054·2019-08-30 15:53
閱讀 3254·2019-08-30 15:53
閱讀 1062·2019-08-30 15:45
閱讀 789·2019-08-30 15:44
閱讀 3498·2019-08-30 14:24
閱讀 996·2019-08-30 14:21
