如何科學的組織React組件樣式

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， 樣式和組件都有了，不過仍需實踐。