css中的模塊是什么

這篇文章主要講解了“css中的模塊是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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中：

<h2 class="title">An example heading</h2>

在CSS中定義這個類：

.title {  
    background-color: red;  
}

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

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

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

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

生成的HTML文件可能是這樣：

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

生成的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中的模塊是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！