React的組件式開發，讓我們可以利用其Component Model，專注于單個組件的邏輯開發，其中還包括組織組件的樣式。先聲明，本文并不是webpack配置教程，不會介紹詳細的配置過程，假設你們已經用過了css-loader style-loader extract-text-webpack-plugin。

正在使用的方式

我們理想中的文件結構可能會是這樣的：

- components- modal- modal.jsx- modal.css // 可以是任意預處理器- dropdown- dropdown.jsx- dropdown.css

然而，js現在可以做模塊化，css并不行，所有css的定義都可以被視為全局變量，在css被打包后，一個組件的樣式有可能會影響到其他組件，于是我們可以通過命名約定（name convention）來曲線救國（這一點并不局限于react開發）。

@modal-prefix: modal;.@{modal-prefix} { }.@{modal-prefix}-title { }

類似于上面的使用less的方式，在文件頂部先定義個類的前綴，來盡量避免命名沖突的可能。于是在組件中就可以這樣做

import React from 'react'; import './modal.less';export default React.createClass({render () {return <div className="modal-title">Hello</div>;} });

上面就是我現在在用的方式，利用命名約定做到了偽模塊化（其實即便不是在使用react開發項目，也會用類似的方式）。

CSS in JS

之前看到過一個ppt：https://speakerdeck.com/vjeux/react-css-in-js，談到了類似的問題。

一個方向是把樣式也直接寫進組件里，即使用inline style。首先，直接用傳統的inline style并不可取，它對屬性的支持有限，比如不能用偽類、多個不同瀏覽器前綴的相同屬性、媒體查詢、動畫等。至于重用樣式而言，在react中倒是還行：將需要重用的樣式對象作為模塊導出即可。

其實大家很努力地希望CSS in JS可以實現，比如：

react-style

github地址

它的局限就是上面提到過的屬性支持的問題，沒有細究這個東西，不太喜歡。

local scoped CSS

https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope

用這個東西現在是webpack官方支持的，已在css-loader中實現，可以真正讓你的css代碼作為本地聲明，類似的代碼：

// style.css :local(.title) { background: red; }

在需要這份樣式的組件里引入這個模塊：

import styles from 'style.css'<div className={styles.title}></div>

首先css的語法中是不支持這個:local()的，我們先看看頁面最終的代碼：

<div class="_3dpOqNNJl6oyjYpdDHCFD9" data-reactid=".0.2.1">Info</div>

到這里應該明白了，其實這也算是個預處理器，它將:local(.title)的類名變成了一個哈希值，僅可以通過模塊導入的方式來獲取這個哈希值并應用到組件上（生成的類名是可以配置的）。現在css-loader可以通過添加module選項（詳細內容可以參考上面CSS Modules的鏈接）使得css默認定義的是local scoped的，希望共享的可以用:global()定義。

也可以和預處理器混用：

:global {.global-class-name {color: green;} }

目前看下來，它只對class名做哈希，也就是說：

:local(.title span) // .[hash] span

然而

:local(.title .name) // .[hash0] .[hash1]

這個算是一個有意思的方式，首先它依賴于webpack，而webpack并不局限于React的開發，任何前端項目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道這個CSS Modules會有怎么樣的發展，感覺可以嘗試。

這里是一個使用樣例：https://github.com/css-modules/webpack-demo

寫在最后的話

目前的探索結果暫時是這樣，之后可能會繼續來填坑。反正現在應該不會去用CSS in JS，CSS Modules可以一試，因為css-loader這個插件基本react的項目里都會使用，寫好的組件一個import， 樣式和組件都有了，不過仍需實踐。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何科学的组织React组件样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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