css模組是什麼

CSS模組就是所有的類別名稱都只有局部作用域的CSS文件，也就是CSS檔案中的所有類別名稱和動畫名稱的作用域都預設為目前作用域。 CSS模組將作用域限制於元件中，從而避免了全域作用域的問題。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

CSS模組是：

CSS files in which all class names and animation names are scoped locally by default.

CSS檔案中的所有類別名稱(class names) 和動畫名稱(animation names) 的作用域都預設為目前作用域。

CSS模組就是所有的類別名稱都只有局部作用域的CSS檔案。

所以CSS模組不是瀏覽器中的官方標準(official spec) 或實踐(implementation) 而是一個(在Webpack或者Browserify的幫助下)改變類名和選擇器的作用域到當前文件(類似於命名空間)的建構過程。

這看起來像什麼以及為什麼這樣呢？我們將馬上看到它。首先，記住通常情況下HTML和CSS是怎麼運作的。一個類別名稱應用在HTML中：

<h1 id="An-nbsp-example-nbsp-heading">An example heading</h1>

在CSS中定義這個類別：

.title {  
    background-color: red;  
}

一旦這個CSS被應用到這個HTML文件中，應用這個類別的h1的背景色將變為紅色。我們不需要處理CSS或HTML。瀏覽器明白這些文件的格式。

CSS模組採用了不同的方法。與寫純HTML不同，我們需要在一個JavaScript檔案中，例如index.js寫我們的標記。下面這個例子告訴我們它將怎樣工作(稍後我們將採用一個更實際的例子)：

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

在我們的構建過程中，編譯程序將查看我們引入的styles.css文件，隨後查看我們的JavaScript文件，將.title類別透過styles.title應用。我們的建置過程接著將處理這些到一個新的、分離的HTML和CSS文件，用一個新的字串取代HTML類別屬性(HTML Class )和CSS選擇器類別(CSS selector class)。

產生的HTML檔案可能是這樣：

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

產生的CSS檔案可能是這樣：

._styles__title_309571057 { 
    background-color: red; 
}

之前的類別屬性和選擇器.title已經完全不存在了，取而代之的是一個全新的字串。我們之前的CSS已經根本不提供給瀏覽器了。

為什麼我們應該使用CSS模組？

使用CSS模組，它將保證所有樣式都作用於單一元件：

• 在一個地方

• 只應用於該元件而沒有別的

此外，任何元件都可以有一個真正的依賴關係，如

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

這種做法的目的是為了解決css中全域作用域(global scope)的問題

你曾經有過試圖在一個缺乏時間和資源的情況下盡快寫出簡單的CSS而不用考慮它對其他造成的影響的情況嗎？

你曾經有在樣式表的底部殘留一些隨意的不好的片段並且嘗試去組織他們但是從來沒有組織嗎？

你曾經碰到過一些你並不能完全確認它的作用或是否已經被使用的樣式嗎？

你曾經是否考慮過你可以移除一些樣式而不破壞其他？疑惑這個樣式是取決於自己還是依賴其他？或在其他地方重寫樣式？

這些問題可能會讓你很頭疼，延長專案的截止日期，並且憂傷的、渴望的望著窗外。

使用CSS模組以及預設目前作用域的概念，這些問題都會被避免。當你寫樣式時你必須思考樣式的最終結果。

例如，如果你在HTML中使用random-gross-class而沒有將其應用為一個CSS模組風格的類，這個樣式不會被應用，因為CSS選擇器將會被轉換為._style_random -gross-class_0038089.

（學習影片分享：css影片教學）

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