亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS Modules實(shí)踐

hankkin / 640人閱讀

摘要：能最大化地結(jié)合現(xiàn)有生態(tài)預(yù)處理器后處理器等和模塊化能力，幾乎零學(xué)習(xí)成本。編碼相關(guān)的所有樣式上例中打印的結(jié)果是注意到是按照自動(dòng)生成的名。實(shí)踐手動(dòng)引用渲染結(jié)果使用可以實(shí)現(xiàn)使用屬性自動(dòng)加載模塊。

文章同步于Github Pines-Cheng/blog

隨著前端這幾年的風(fēng)生水起，CSS作為前端的三劍客之一，各種技術(shù)方案也是層出不窮。從CSS prepocessor（SASS、LESS、Stylus）到后來的后起之秀 PostCSS，再到 CSS Modules、Styled-Component 等。有人維護(hù)了一份完整的 CSS in JS 技術(shù)方案的對(duì)比，里面已經(jīng)有將近50種技術(shù)方案。CSS Modules就是其中一種。

CSS Modules 介紹

要弄懂CSS Modules是什么，可以先看官方介紹：GitHub – css-modules/css-modules: Documentation about css-modules。

通過上面介紹可以看出，CSS Modules既不是官方標(biāo)準(zhǔn)，也不是瀏覽器的特性，而是在構(gòu)建步驟（例如使用Webpack或Browserify）中對(duì)CSS類名選擇器限定作用域的一種方式（通過hash實(shí)現(xiàn)類似于命名空間的方法）。例如我們?cè)赽uttons.js里引入buttons.css文件，并使用.btn的樣式，在其他組件里是不會(huì)被.btn影響的，除非它也引入了buttons.css.

CSS模塊化

JS已經(jīng)全面實(shí)現(xiàn)了模塊化，但是css還處于探索階段。為什么我們需要css模塊化？主要由一下幾個(gè)原因。

CSS全局作用域問題

CSS的規(guī)則都是全局的，任何一個(gè)組件的樣式規(guī)則，都對(duì)整個(gè)頁(yè)面有效?，F(xiàn)在的前端工程大多是基于組件開發(fā)，隨著工程的頁(yè)面數(shù)量好復(fù)雜度的提升，相信寫css的人都會(huì)遇到樣式?jīng)_突（污染）的問題。一般我們會(huì)采用一下幾種方法：

class命名寫長(zhǎng)一點(diǎn)吧，降低沖突的幾率

加個(gè)父元素的選擇器，限制范圍

重新命名個(gè)class吧，比較保險(xiǎn)

可是以上方案只是降低了全局沖突的概率，并不能徹底解決全局沖突的問題。并且，實(shí)現(xiàn)方式也不夠優(yōu)雅，還增加了代碼的復(fù)雜和冗余。

我們的追求

面向組件開發(fā) ： 處理 UI 復(fù)雜性的最佳實(shí)踐就是將 UI 分割成一個(gè)個(gè)的小組件，React 就鼓勵(lì)高度組件化和分割。我們希望有一個(gè) CSS 架構(gòu)去匹配。

沙箱化（Sandboxed） ： 如果一個(gè)組件的樣式會(huì)對(duì)其他組件產(chǎn)生不必要以及意想不到的影響，那么將 UI 分割成組件并沒有什么用。就這方面而言，CSS的全局作用域會(huì)給你造成負(fù)擔(dān)。

方便 ：不會(huì)增加開發(fā)的負(fù)擔(dān)和代碼的冗余。

方案

CSS 模塊化的解決方案有很多，但主要有三類。

CSS 命名約定

規(guī)范化CSS的模塊化解決方案（比如BEM BEM — Block Element Modifier ,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下問題：

JS CSS之間依然沒有打通變量和選擇器等

復(fù)雜的命名

CSS in JS

徹底拋棄 CSS，用 JavaScript 寫 CSS 規(guī)則，并內(nèi)聯(lián)樣式。styled-components 就是其中代表。styled-components可以讓CSS真正意義地寫到JS里面，同時(shí)讓標(biāo)簽更具有語意化，這跟HTML5新標(biāo)簽思想相同；該框架讓樣式也具備組件化思想，讓前端完全面向組件化編程，就像java的包裝類型。
但存在以下問題：

樣式代碼也會(huì)出現(xiàn)大量重復(fù)。

不能利用成熟的 CSS 預(yù)處理器（或后處理器）

使用 JS 來管理樣式模塊

使用JS編譯原生的CSS文件，使其具備模塊化的能力，代表是 CSS Modules。

CSS Module還是JS和CSS分離的寫法，不會(huì)改變大家的書寫習(xí)慣，CSS Module只需修改構(gòu)建代碼和使用模塊依賴引入className的方式即可使用，且支持less和sass的語法，

使用CSS Modules可以讓組件className控制權(quán)轉(zhuǎn)交給JS，我們不會(huì)去關(guān)心命名沖突污染等問題，同時(shí)可以靈活控制生成的命名，樣式代碼不用修改即可讓使用CSS語法的舊項(xiàng)目零成本接入。

CSS Modules 能最大化地結(jié)合現(xiàn)有 CSS 生態(tài)(預(yù)處理器/后處理器等)和 JS 模塊化能力，幾乎零學(xué)習(xí)成本。只要你使用 Webpack，可以在任何項(xiàng)目中使用。是目前最好的 CSS 模塊化解決方案。

使用 配置

CSS Modules配置非常簡(jiǎn)單，如果你使用webpack，只需要在配置文件中改動(dòng)一行即可。

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

加上 modules 即為啟用，localIdentName 是設(shè)置生成樣式的命名規(guī)則。

編碼

css

/* components/Button.css */
.normal { /* normal 相關(guān)的所有樣式 */ }

js

// components/Button.js
import styles from "./Button.css";
console.log(styles);
buttonElem.outerHTML = ``

上例中 console 打印styles的結(jié)果是：

Object {
  normal: "button--normal-abc53",
  disabled: "button--disabled-def886",
}

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName 自動(dòng)生成的 class 名。其中的 abc53 是按照給定算法生成的序列碼。經(jīng)過這樣混淆處理后，class 名基本就是唯一的，大大降低了項(xiàng)目中樣式覆蓋的幾率。同時(shí)在生產(chǎn)環(huán)境下修改規(guī)則，生成更短的 class 名，可以提高 CSS 的壓縮率。

CSS Modules 對(duì) CSS 中的 class 名都做了處理，使用對(duì)象來保存原 class 和混淆后 class 的對(duì)應(yīng)關(guān)系。

React實(shí)踐 手動(dòng)引用 
import React from "react";
import styles from "./table.css";
 
export default class Table extends React.Component {
    render () {
        return 

            

            

        
;
    }
}

渲染結(jié)果：
使用babel-plugin-react-css-modules

babel-plugin-react-css-modules 可以實(shí)現(xiàn)使用styleName屬性自動(dòng)加載CSS模塊。只需要把className換成styleName即可獲得CSS局部作用域的能力，babel插件來自動(dòng)進(jìn)行語法樹解析并最終生成className。改動(dòng)成本極小，不會(huì)增加JSX的復(fù)雜度，也不會(huì)給項(xiàng)目帶來額外的負(fù)擔(dān)。

import React from "react";
import styles from "./table.css";
 
class Table extends React.Component {
    render () {
        return 

        
;
    }
}
 
export default Table；

CSS Modules 很好的解決了 CSS 目前面臨的模塊化難題。支持與 CSS處理器搭配使用，能充分利用現(xiàn)有技術(shù)積累。如果你的產(chǎn)品中正好遇到類似問題，非常值得一試。

參考

CSS Modules 入門及 React 中實(shí)踐

CSS Modules 用法教程

Styled Components：讓樣式也成為組件

精讀《請(qǐng)停止 css-in-js 的行為》

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112299.html

相關(guān)文章

  • CSS Modules詳解及React中實(shí)踐

    摘要：上例中打印的結(jié)果是對(duì)中的名都做了處理，使用對(duì)象來保存原和混淆后的對(duì)應(yīng)關(guān)系。結(jié)合實(shí)踐在處直接使用中名即可。如因?yàn)橹粫?huì)轉(zhuǎn)變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/201...

    wemall 評(píng)論0 收藏0

  • React項(xiàng)目 - 幾種CSS實(shí)踐

    摘要：一切樣式都是全局，產(chǎn)生的各種命名的痛苦，等命名規(guī)則能解決一部分問題，但當(dāng)你使用三方插件時(shí)卻無法避免命名沖突。這一解決法的優(yōu)雅在于，全局的可以正常使用，只有帶后綴的才會(huì)被化使用的模板字符串，在文件里寫純粹的。 前言團(tuán)隊(duì)在使用react時(shí)，不斷探索，使用了很多不同的css實(shí)現(xiàn)方式，此篇blog總結(jié)了，react項(xiàng)目中常見的幾種css解決方案：inline-style/radium/styl...

    princekin 評(píng)論0 收藏0

  • React實(shí)踐（一）——webpack4搭建開發(fā)環(huán)境

    摘要：按需引入在入口文件中引入全局的如果僅僅是這樣的話，我們加載組件是全部加載的，這時(shí)候我們要在的中配置這樣之后就可以按照的官網(wǎng)來使用里的組件了。啦，這樣一個(gè)簡(jiǎn)單的開發(fā)環(huán)境就搭建好了。 github 1、創(chuàng)建基本目錄結(jié)構(gòu) npm init 創(chuàng)建src文件夾，再其中新建index.html 安裝webpack依賴:npm install webpack webpack-cli webpack...

    Simon 評(píng)論0 收藏0

  • Webpack 最佳實(shí)踐總結(jié)(三)

    摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業(yè)務(wù)邏輯開發(fā)流程需要經(jīng)過預(yù)處理器如或，然后再經(jīng)過后處理器如進(jìn)行深加工。 還未看的，可以點(diǎn)擊查看上兩篇文章喲：Webpack 最佳實(shí)踐總結(jié)(一)、Webpack 最佳實(shí)踐總結(jié)(二) 好了，這篇是第三篇，也是完結(jié)篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會(huì)讓你失望的 整合 CSS 加工流 有時(shí)候，前端項(xiàng)目中除了 JavaScript ...

    pkhope 評(píng)論0 收藏0

  • Webpack 最佳實(shí)踐總結(jié)(三)

    摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業(yè)務(wù)邏輯開發(fā)流程需要經(jīng)過預(yù)處理器如或，然后再經(jīng)過后處理器如進(jìn)行深加工。 還未看的，可以點(diǎn)擊查看上兩篇文章喲：Webpack 最佳實(shí)踐總結(jié)(一)、Webpack 最佳實(shí)踐總結(jié)(二) 好了，這篇是第三篇，也是完結(jié)篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會(huì)讓你失望的 整合 CSS 加工流 有時(shí)候，前端項(xiàng)目中除了 JavaScript ...

    jerryloveemily 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hankkin

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<