什麼是css模組化？ css模組化的實作方法

本篇文章帶給大家的內容是關於什麼是css模組化？ css模組化的實現方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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 "]')。

<ul>
    <li data-tab="1">tab1</li>
    <li data-tab="2">tab2</li>
</ul>
<p data-tab-container="1"></p>
<p data-tab-container="2"></p>

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 = '<p class="&#39; + styles.className + &#39;">Hello!</p>';

實際效果

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

# DOM
<p class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</p>

在這個轉換過程中，根據檔案的位置、內容產生一個全域唯一的base64 字串，取代原來的名稱，避免了全域命名衝突的問題，這樣便達到了模組化的目的。所以，開發的過程中便無全域樣式衝突的問題。

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

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

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

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

2、推薦用.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 () => (
    <div className={&#39;container&#39;}>
        <p className={&#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;}>Hi!</div>
        <style jsx>{`
          .container {
            color: blue;
          }
          p:first-child {
            color: red;
          }
          .hello {
            color: yellow;
          }
          #hi {
            color: green;
          }
        `}</style>
    </div>
)

3.1.4 转码

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

转码后的文件

import _JSXStyle from 'styled-jsx/style';
export default () => (
    <div className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;container&#39;}>
        <p className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;} className={"jsx-234963469"}>Hi!</div>
        <_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;}"} />
    </div>
);

3.1.5 运行

实际渲染效果

<style type="text/css" data-styled-jsx="">
.container.jsx-234963469{
  color:blue;
}
p.jsx-234963469:first-child{
  color:red;
}
.hello.jsx-234963469{
  color:yellow;
}
#hi.jsx-234963469{
  color:green;
}
</style>
<div class="jsx-234963469 container">
  <p class="jsx-234963469 hello">Hello! Hello!</p>
  <div id="hi" class="jsx-234963469">Hi!</div>
</div>

以上就是本篇文章的全部内容了，更多css相关内容请关注php中文网的css教程栏目。

以上是什麼是css模組化？ css模組化的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！