成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何科學(xué)的組織React組件樣式

jackzou / 1028人閱讀

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

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

正在使用的方式

我們理想中的文件結(jié)構(gòu)可能會是這樣的：

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

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

@modal-prefix: modal;

.@{modal-prefix} {
}

.@{modal-prefix}-title {
}

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

import React from "react";
import "./modal.less";

export default React.createClass({
    render () {
        return 


Hello


;
    }
});

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

CSS in JS

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

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

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

react-style

github地址

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

local scoped CSS

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

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

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

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

import styles from "style.css"

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

Info

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

也可以和預(yù)處理器混用：

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

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

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

然而

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

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

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

寫在最后的話

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116376.html

相關(guān)文章

  • 兩年React老兵的總結(jié) - 如何組織React項目

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

    hoohack 評論0 收藏0

  • 前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

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

    sean 評論0 收藏0

  • 前端開發(fā)者手冊2019

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

    church 評論0 收藏0

  • 前端開發(fā)者手冊2019

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

    xiao7cn 評論0 收藏0

發(fā)表評論

0條評論

jackzou

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<