前端進階（1） - CSS 模塊化

VishKozus 發布于2019-08-30 15:53 / 2245人閱讀

摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。

CSS 模塊化

CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。

但隨著前端的發展，前端項目已經變得越來越龐大和復雜，社區也一直在探索如何以一種有效的方式去管理前端的代碼（js/css/html）和資源（images, fonts, ...）。

在這個過程中，社區探索出了 js 的模塊化（amd, commonjs, es6），現在用 js 開發大工程已經游刃有余，而 css 的模塊化卻還沒有特別的深入人心。

1. 分組式模塊化

這是最早對 css 模塊化的實現，也是最主要的一種方式，包括現在很多組件和開發者都是用這種方式開發的。

分組式模塊化就是用命名的方式，以不同的前綴代表不同的含義，實現樣式分組，文件分塊，達到模塊化的目的。

比如：

# 目錄結構
|-- one/page/css/ 某個頁面的 css 目錄
    |-- common.css 通用的 css
    |-- page1/ 單頁面1
        |-- section1.css 區域1 css
        |-- section2.css 區域2 css
    |-- page2/ 單頁面2
    |-- ...
    
# common.css 文件
.c-el-1 {
    ...
}
.c-el-2 {
    ...
}    
...    
    
# page1/section1.css 文件
.page1-section1 {
    ...
}
.page1-section1 .el-1 {
    ...
}    
.page1-section1 .el-2 {
    ...
}    
...

# page1/section2.css 文件
.page1-section2 {
    ...
}
.page1-section2 .el-1 {
    ...
}    
.page1-section2 .el-2 {
    ...
}    
...

這種方式并不是真正意義上的模塊化，因為無法避免全局沖突的問題，但原生 css 并不具備編程的能力，所以這個問題是無法避免的。盡管分組式不算真正意義上的模塊化，但是這種方式沒有脫離 css 原生的機制，所以尤其是第三方組件在導出 css 文件時，很多都使用的是這種方式。

比如，ant-design 導出的 css 中使用 ant- 前綴標識，mui 導出的 css 中使用 mui- 前綴標識等等。

1.1 最佳實踐

css 命名分組實踐的時間很長，從 css 誕生之初就有了，所以社區已經發展很成熟了，比如網易的 css 規范框架 NEC，H-ui。

補充：

一個 css 文件不宜過大，可以使用 @import 進行文件分塊；

樣式渲染盡量不要使用 #id [attr]，應盡量使用 .class；

使用 js 庫操作 dom 時，盡量不要用 .class，應盡量用 #id data-set，如 $("#main"), $("[data-tab="1"]")。


    tab1
    tab2

1.2 css 語言擴充

因為 css 不是編程語言，所以不能聲明變量、函數，不能做判斷、循環和計算，也不能嵌套，所以這就使得寫樣式是一個效率底下且又枯燥的活兒。

為了解決這個問題，社區在探索中主要衍生出了兩種拓展語言 less 與 sass，它們兼容 css，并且拓展了編程的功能，主要是帶來了以下的特性：

可以聲明變量、函數，可以進行一些簡單的計算、判斷、循環；

可以嵌套選擇器，這樣節省了書寫的內容，也更具閱讀性；

.page1-section1 {
    ...
    
    .el-1 {
        ...
        
        .el-1-1 {
            ...
        }
    }
        
    .el-2 {
        ...
    }   
}

@import 避免重復導入問題，因此可以放心大膽的導入其他文件。

從模塊化的角度來講，less 與 sass 只是擴充了 css 的功能，但并沒有在語言的層面做模塊化，因為全局命名沖突的問題依然還在。

2. 模塊化（導出為 js 對象）

想要讓 css 具備真正意義上的模塊化功能，暫時還不能從語言的層面來考慮，所以只能從工具的角度來實現。

目前比較好的方式是使用 js 來加載 css 文件，并將 css 的內容導出為一個對象，使用 js 來渲染整個 dom 樹和匹配相應的樣式到對應的元素上，在這個過程中，我們便有機會對 css 做額外的處理，來達到模塊化的目的。

比如：

源文件

# style.css 文件
.className {
  color: green;
}

# js 文件
import styles from "./style.css";

element.innerHTML = "Hello!
";

實際效果

# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
  color: green;
}

# DOM
Hello!

在這個轉換過程中，根據文件的位置、內容生成一個全局唯一的 base64 字符串，替換原來的名稱，避免了全局命名沖突的問題，這樣便達到了模塊化的目的。所以，開發的過程中便無全局樣式沖突的問題。

# common.css 文件
.container {
    ...
}
.el1 {
    ...
}
.el2 {
    ...
}    
...    
    
# page1/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}    
...

# page2/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}
...

對 css 模塊化的定義參見 css-modules，其中對 css 書寫需求主要是：

應當用 .class，而非#id [attr]（因為只有 .class 才能導出為對象的屬性）；

推薦用 .className 書寫，而非 .class-name（前者可以通過 styles.className 訪問，后者需要通過 styles["class-name"] 才能訪問）。

更多功能可以查看 css-modules。

當然這個功能需要構建工具的支持，如果你是使用 webpack 構建工程的話，可以使用 css-loader，并設置 options.modules 為 true，便可使用模塊化的功能了。

3. 模塊化（內置 js，綁定組件）

隨著前端組件化的發展，組件化框架的更新，如 react、vue，慢慢的發展為把整個組件的資源進行封裝，并只對外暴露一個對象，而調用者無需關心組件的內部實現和資源，直接調用這個對象就夠了。

比如（以 react 為例），一個 Welcome 組件，包括一個 js 文件、一個 css 文件、圖片：

# Welcome 組件
|-- welcome.js
|-- welcome.css
|-- images/

在 welcome.js 中便可如下加載（使用“導出為 js 對象”的 css 模塊化）：

import styles from "./welcome.css";
import image1 from "./images/1.jpg";

其實，還有另外一種思路，就是將 css 內置 js 中，成為 js 的一部分。

這樣做的目的，一是 css 的模塊化，二是直接綁定到組件上。

比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的這種方式。

這種方式的實現有很多種，這里主要介紹一下 styled-jsx。

3.1 styled-jsx

styled-jsx 的原理是根據當前文件的位置、內容生成一個全局唯一的標識，然后把這個標識追加到組件每一個元素上，每一個樣式選擇器上，達到模塊化的目的。

可以參考官方文檔，查看詳細的用法，我在這里給個例子：

3.1.1 安裝工具（babel 轉碼所需）

npm install --save styled-jsx

3.1.2 配置 babel plugins（如 .babelrc）

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

3.1.3 添加源文件代碼

hello.js

export default () => (
    
        Hello! Hello!
        Hi!
        
    
)

3.1.4 轉碼

babel path/to/hello.js -d target/dir

轉碼后的文件

import _JSXStyle from "styled-jsx/style";

export default () => (
    
        Hello! Hello!
        Hi!
        <_JSXStyle styleId={"234963469"} css={".container.jsx-234963469{color:blue;}p.jsx-234963469:first-child{color:red;}.hello.jsx-234963469{color:yellow;}#hi.jsx-234963469{color:green;}"} />
    
);

3.1.5 運行

實際渲染效果






  Hello! Hello!
  Hi!

4. 后續

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

GPU云服務器云服務器前端模塊化前端css css前端前端css框架

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

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

前端進階（14） - 如何提升前端性能和響應速度

摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達到提高響應速度的目的。如果你的項目不需要處理靜態資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。如何提升前端性能和響應速度下面大多是從前端工程化的角度給出的優化建議，如果需要了解語法上的優化，可以參考：如何提高頁面加載速度編寫高效的JavaScript Web前端性能優化進階 - 完結篇 1. 原生...

lylwyy2016 2019-08-29 17:04 評論0 收藏0
前端進階（14） - 如何提升前端性能和響應速度

摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達到提高響應速度的目的。如果你的項目不需要處理靜態資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。如何提升前端性能和響應速度下面大多是從前端工程化的角度給出的優化建議，如果需要了解語法上的優化，可以參考：如何提高頁面加載速度編寫高效的JavaScript Web前端性能優化進階 - 完結篇 1. 原生...

Airy 2019-08-23 12:30 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端進階（1） - CSS 模塊化

摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。但隨著前端的發展，前端項目已經變得越來越龐大和復雜，社區...

lauren_liuling 2019-08-22 18:18 評論0 收藏0
web前端工程師進階指南

摘要：進階的知識的話就是響應式這一塊了，一套代碼能適配手機是初級前端工程師的進階，在北京工資一般在左右。進階的知識應該是這一塊了，當然并不難，了解怎么與后臺交互是學習的關鍵點，在北京的工資一般在左右。 web前端？如果你是一名web前端工程師，那么你將感到幸運，從之前的默默無聞，到后來的給后臺工程師打下手，再到巔峰一時。web前端可謂是當下最火的職位之一。 showImg(https://s...

曹金海 2019-08-02 16:07 評論0 收藏0