css中的模塊是什么

這篇文章主要講解了“css中的模塊是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css中的模塊是什么”吧！

CSS模塊就是所有的類名都只有局部作用域的CSS文件，即CSS文件中的所有類名和動(dòng)畫名的作用域都默認(rèn)為當(dāng)前作用域。CSS模塊將作用域限制于組件中，從而避免了全局作用域的問(wèn)題。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

CSS模塊是：

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

CSS文件中的所有類名(class names) 和動(dòng)畫名(animation names) 的作用域都默認(rèn)為當(dāng)前作用域。

CSS模塊就是所有的類名都只有局部作用域的CSS文件。

所以CSS模塊不是瀏覽器中的 官方標(biāo)準(zhǔn)(official spec) 或者 實(shí)踐(implementation) 而是一個(gè)(在Webpack或者Browserify的幫助下)改變類名和選擇器的作用域到當(dāng)前文件(類似于命名空間)的構(gòu)建過(guò)程。

這看起來(lái)像什么以及為什么這樣呢？我們將馬上看到它。首先，記住通常情況下HTML和CSS是怎么工作的。一個(gè)類名應(yīng)用到HTML中：

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

在CSS中定義這個(gè)類：

.title {  
    background-color: red;  
}

一旦這個(gè)CSS被應(yīng)用到這個(gè)HTML文檔中，應(yīng)用這個(gè)類的h2的背景色將變?yōu)榧t色。我們不需要處理CSS或者HTML。瀏覽器明白這些文件的格式。

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

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

在我們的構(gòu)建過(guò)程中，編譯程序?qū)⒉榭次覀円氲膕tyles.css文件，隨后查看我們的JavaScript文件，將.title類通過(guò)styles.title應(yīng)用。我們的構(gòu)建過(guò)程接著將處理這些到一個(gè)新的、分離的HTML和CSS文件，用一個(gè)新的字符串替換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已經(jīng)完全不存在了，取而代之的是一個(gè)全新的字符串。我們之前的CSS已經(jīng)根本不提供給瀏覽器了。

為什么我們應(yīng)該使用CSS模塊？

使用CSS模塊，它將保證所有樣式都作用于單個(gè)組件：

• 在一個(gè)地方

• 只應(yīng)用于該組件而沒(méi)有別的

此外，任何組件都可以有一個(gè)真正的依賴關(guān)系，如

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

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

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

你曾經(jīng)有過(guò)試圖在一個(gè)缺乏時(shí)間和資源的情況下盡快寫出簡(jiǎn)單的CSS而不用考慮它對(duì)其他造成的影響的情況嗎？

你曾經(jīng)有在樣式表的底部殘留一些隨意的不好的片段并且嘗試去組織他們但是從來(lái)沒(méi)有組織嗎？

你曾經(jīng)碰到過(guò)一些你并不能完全確認(rèn)它的作用或者是否已經(jīng)被使用的樣式嗎？

你曾經(jīng)是否考慮過(guò)你可以移除一些樣式而不破壞其他？疑惑這個(gè)樣式是取決于自己還是依賴于其他？或者在其他地方重寫樣式？

這些問(wèn)題可能會(huì)讓你很頭疼，延長(zhǎng)項(xiàng)目的截止日期，并且憂傷的、渴望的望著窗外。

使用CSS模塊以及默認(rèn)當(dāng)前作用域的理念，這些問(wèn)題都將被避免。當(dāng)你寫樣式時(shí)你必須思考樣式的最終結(jié)果。

比如，如果你在HTML中使用random-gross-class而沒(méi)有將其應(yīng)用為一個(gè)CSS模塊風(fēng)格的類，這個(gè)樣式不會(huì)被應(yīng)用，因?yàn)镃SS選擇器將會(huì)被轉(zhuǎn)換為._style_random-gross-class_0038089.

感謝各位的閱讀，以上就是“css中的模塊是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css中的模塊是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！