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

jackzou 發布于2019-08-30 15:45 / 1000人閱讀

摘要：也可以和預處理器混用目前看下來，它只對名做哈希，也就是說然而這個算是一個有意思的方式，首先它依賴于，而并不局限于的開發，任何前端項目都可以使用，那么就也都可以使用的概念，不知道這個會有怎么樣的發展，感覺可以嘗試。

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 

Hello

;
    }
});

上面就是我現在在用的方式，利用命名約定做到了偽模塊化（其實即便不是在使用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"

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

Info

到這里應該明白了，其實這也算是個預處理器，它將: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，樣式和組件都有了，不過仍需實踐。

GPU云服務器云服務器組件樣式 react如何部署到云服務器上數據科學如何國際組織的域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116376.html

兩年React老兵的總結 - 如何組織React項目

摘要：一個復雜的應用都是由簡單的應用發展而來的隨著越來越多的功能加入項目代碼就會變得越來越難以控制本文章主要探討在大型項目中如何對組件進行組織讓項目具備可維護性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態管理目錄組件設計的基本原則基本原則高一個復雜的應用都是由簡單的應用發展而來的, 隨著越來越多的功能加入項目, 代碼就會變得越來越難以控制. 本文章主要探討在大型項目中如何對組件進行組...

hoohack 2019-08-23 18:40 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
前端開發者手冊2019

摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。前端開發者手冊2019 Cody Lindley 編著原文地址本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。下載：PDF ...

church 2019-08-02 16:18 評論0 收藏0
前端開發者手冊2019

摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。前端開發者手冊2019 Cody Lindley 編著原文地址本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。下載：PDF ...

xiao7cn 2019-08-26 13:47 評論0 收藏0