什么是CSS Modules ？我們為什么需要他們

dongfangyiyu 發布于2019-08-29 15:15 / 2765人閱讀

摘要：我們將去探索它的目的和主旨。這到底是什么呢我們為什么要這么做呢我們很快就進行介紹。我們不需要人為處理和文件。我們不寫純，我們需要在一個類似這樣的文件中取寫我們所有的標簽。這就是樣式也有作用域的原因。換句話說消除了特殊性問題。

原文地址：https://css-tricks.com/css-mo...
最近我對CSS Modules比較好奇。如果你曾經聽說過他們，那么這篇博客正適合你。我們將去探索它的目的和主旨。如果你同樣很好奇，敬請關注，在下一篇博文中我們將介紹如何使用CSS Modules。如果你想親自嘗試并且掌握如何使用，第三部分將會很適合你，這一部分剖析了如何在React環境中使用。

什么是CSS Modules？

根據官方的repository介紹，CSS Modules是：

所有的class的名稱和動畫的名稱默認屬于本地作用域的CSS文件。
所以CSS Modules不是一個官方的規范，也不是瀏覽器的一種機制，它是一種構建步驟中的一個進程。（構建通常需要webpack或者browserify的幫助）。通過構建工具的幫助，可以將class的名字或者選擇器的名字作用域化。（類似命名空間化。）

這到底是什么呢？我們為什么要這么做呢？我們很快就進行介紹。首先，不要忘記HTML和CSS的工作原理。在HTML中一個類添加：

An example heading

在CSS中這個class的定義如下：

.title {
    background-color: red;
}

只要CSS被添加到HTML文檔上，那個

的背景色就是紅色。我們不需要人為處理CSS和HTML文件。瀏覽器本身自己就理解這些文件的格式。

CSS Modules 和上面的方法不一樣。我們不寫純HTML，我們需要在一個類似index.js這樣的Javascript 文件中取寫我們所有的標簽。這里有一個例子來說明這是怎么回事（我們之后將會去看更多真實的實例）：

import styles from "./styles.css";

element.innerHTML = 
    `
        An example heading
      
`;

在我們構建的步驟中，編譯器將會搜索我們導入的styles.css文件，然后到我們剛剛寫的js文件中，通過styles.title使得.title class可用。我們的構建步驟將會同時處理這些東西成為新的，分離的HTML和CSS文件，并且用一個新的字符串去替換HTML和CSS選擇器的class。

通過構建工具生成的HTML也許像下面這樣：


    An example heading

通過構建工具生成的CSS也許像下面這樣：

._styles__title_309571057{
    background-color: red;
}

class屬性和.title選擇器已經完全不見了，取而代之的是這個全新的字符串；我們的源CSS文件也沒有為瀏覽器提供服務。
就像Hugo Griaudel在他的這一模塊的教程中所說：

[the classes]是動態生成的，唯一的，而且和當前的樣式有映射關系的。

這就是樣式也有作用域的原因。它們的作用域是特定的模板。如果我們有一個buttons.css文件我們將在buttons.js模板中導入它，并且在css文件內的.btn class相對于其他模板(例如forms.js)也是不可用的，除非我們在這個文件中同樣導入了進來。

為什么我們想要把CSS和HTML搞成這樣？我們這樣做的真真正正的原因是什么？

為什么我們要用CSS Modules?

有了CSS Modules，就可以確保所有的樣式能夠服務于單個組件：

集中在一個地方

只應用于那個組件，其他組件不適用

除此之外，任何組件都能擁有真正的依賴，就像下面這樣：

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

element.innerHTML = ``;

這樣設計的目的在于解決CSS中的全局作用域問題。

你曾有過為了提升效率，節省時間去簡略的寫css嗎？而且是在完全不考慮你會不會影響其他代碼的情況下？

你曾有過在樣式表的底部隨機打了一些的比特和垃圾，然后嘗試回過頭來重新去組織但是從來沒這么做嗎？

你曾有過看到樣式卻不完全知道它的意義的時候嗎？即使它們被用在了當前的標簽上？

你曾有過思考如何去不破壞任何東西的情況下，去棄用一些現有的樣式嗎？考慮過這些樣式是僅僅作用于自己還是依賴其它樣式呢？或者是在哪里重新覆蓋了樣式了？

這些問題會讓人很頭痛，項目時間緊張，而你的心思又在窗外的花花世界。

但是當你有了CSS Modules之后，關鍵是這種默認本地作用域的概念，這個問題將會被避免。你必須去思考寫樣式的方便性。

例如，如果你在不應用CSS module-style class去做轉換的情況下，在HTML中使用random-gross-class，這個樣式將不會被應用，因為這個選擇器將會被轉換為._style_random-gross-class_0038089.

composes 關鍵詞

我們現在擁有一個叫做type.css的模塊去渲染text樣式。在那個文件中，我們也許會有如下代碼：

.serif-font {
    font-family: Georgia,serif;
}
.display {
   composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我們將在我們的模板中聲明class：

import type from "./type.css";
element.innerHTML = 
`
    
        This is a heading
    ;
`

編譯后的模板上的標簽會是下面這樣：


    Heading title

使用composes關鍵詞匯將2個class都綁定到元素上，從而避免了類似解決方案的一些問題，類似Sass中的@extend。

我們甚至可以在一個分離的CSS文件中去compose。

.element{
    compose: dark-red from "./colors.css";
    font-size: 30px;
    line-height: 1.2;
}

不需要BEM

在構建CSS module的過程中，不需要BEM。有2個原因：

易解析- 類似type.display這樣的代碼，對于開發者來說就像BEM-y的.font-size__serif--large。當BEM選擇器變長時，可能更容易被理解。

本地作用域- 比如我們在模塊中有一個類似.big去修改font-size屬性的class。同樣我們可能還會用.big去同時增大padding和font-size。這沒關系！他們不會沖突，因為作用域中的樣式是有各自意義的。甚至一個module引入2個樣式表，然后它有通常的名字我們的構建工具會為那個class加上前綴作區分。換句話說：CSS modules消除了特殊性問題。

很酷，難道不是嗎？

這些僅僅是CSS Modules的部分優點。

如果你想學習更多，Glen Madden寫了更多的這樣做的好處。

這個系列的下一篇文章將會去探索如何在項目中使用Webpack和CSS Modules。我們將使用最新的ES2015的特性去實現，也會給出一些代碼例子去引導大家去理解。

云服務器 GPU云服務器什么是css css是什么 css是什么意思 css中div是什么意思

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

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

PostCSS真的太好用了！

摘要：下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹，箭頭后面是對應功能的插件及...

SKYZACK 2019-08-29 15:18 評論0 收藏0
讓CSS更完美: PostCSS-modules

摘要：起初只是一個美化文檔的工具，但是事情到年發生了變化。對于來說，這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法，解決了命名沖突的問題。長長的前綴將成為歷史，歡迎來到未來的世界。譯者注（GeoffZhu）: 這篇適合一些使用過預處理CSS的開發者，比如less，sass或stylus，如果你都沒用過，那你一定不是個好司機。在PostCSS中早就可以使用CSS M...

Barry_Ng 2019-08-30 13:22 評論0 收藏0
對React應用的一些思考

摘要：但還存在一些問題，比如，單向數據流導致的有時數據鏈過長過繁瑣所以才產生了，需要在多地保存同一份數據等等。數據流細粒度的目前來說，我們的的甚至是還是設計得太過簡單。前言 ??由于筆者對React的了解不深，即便算是學習React的時間，到目前也才剛剛半年，所以錯誤不足之處還望指正。以下都是基于React 15（可能有些是16），webpack1進行探討（注：未學習過Vue，Ng，Emb...

琛ｈ。 2019-08-20 18:23 評論0 收藏0
JS每日一題：Webpack有哪些常見的Loader？他們是解決什么問題的？

摘要：期有哪些常見的他們是解決什么問題的在回答之前我們先來了解一下我們在上一節講過，是屬于模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎么做到呢這時就有了定義用于對模塊的源代碼進行轉換。 20190326期 Webpack有哪些常見的Loader？他們是解決什么問題的？在回答之前我們先來了解一下Loader 我們在上一節講過，webpack是屬于模塊化方案，他能讓任意類型的文件都能...

Hanks10100 2019-08-23 16:28 評論0 收藏0
從sass到PostCSS

摘要：下面是頭部的樣式示例這是一個用例我在之前了解過自定義屬性的用法。這里有一個正在進行中的規則的規范與之相關。允許儲存一系列的屬性并且在選擇器引用。原文鏈接：https://tylergaw.com/articles...譯者：Icarus郵箱：xdlrt0111@163.com 多年來我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件來嘗試處理樣式.我愛死了現...

Backache 2019-08-30 15:52 評論0 收藏0