什么是 CSS？

hankkin 發(fā)布于2019-08-30 11:26 / 2442人閱讀

摘要：的第二章，什么是釋義，層疊樣式表也算是一種標(biāo)記語(yǔ)言，其內(nèi)容作為瀏覽器的輸入，瀏覽器會(huì)解析其文本內(nèi)容，作為附加的樣式信息，用以修飾標(biāo)簽。年，提出層疊樣式表，的雛形出現(xiàn)。屬性的繼承開(kāi)篇我們就提到了，為層疊樣式表，層疊代表的意思為屬性的繼承。

前言

作為程序員，技術(shù)的落實(shí)與鞏固是必要的，因此想到寫(xiě)個(gè)系列，名為 why what or how 每篇文章試圖解釋清楚一個(gè)問(wèn)題。

why what or how 的第二章，什么是 CSS ？

釋義

CSS - Cascading Style Sheets，層疊樣式表

CSS 也算是一種標(biāo)記語(yǔ)言，其內(nèi)容作為瀏覽器的輸入，瀏覽器會(huì)解析其文本內(nèi)容，作為 HTML 附加的樣式信息，用以修飾標(biāo)簽。

標(biāo)記語(yǔ)言，一類(lèi)以固定的形式描述文檔結(jié)構(gòu)或是數(shù)據(jù)處理細(xì)節(jié)的語(yǔ)言，一般為純文本形式，其內(nèi)容作為其他程序的輸入。

樣式表大家都很清楚，記錄樣式信息的表格，以鍵值對(duì)的形式存在，格式如下

p {
    font-size: 10px;
}

那么何為層疊呢？層疊的意義是什么？

層疊，字面意思：層層疊加，我們知道 HTML 的頁(yè)面結(jié)構(gòu)是樹(shù)狀的，不同標(biāo)簽的層級(jí)嵌套最終組合形成了頁(yè)面，那么從另一個(gè)角度來(lái)看，頁(yè)面的結(jié)構(gòu)就是一層一層的，如下圖所示

html 為最底層，body 位于 html 層之上，header、nav、article、aside、footer 這些標(biāo)簽位于 body 之上，section 位于 article 之上，標(biāo)簽的堆疊就形成了網(wǎng)頁(yè)結(jié)構(gòu)，那么這關(guān) CSS 什么事？

先拋出一個(gè)問(wèn)題：如果說(shuō) article 標(biāo)簽代表一篇文章，那么其內(nèi)部的文字大小，樣式，排版是不是應(yīng)該一致？

是！那么樣式進(jìn)行層疊的意義也在于此，只要我給 article 標(biāo)簽固定的樣式，那么 article 內(nèi)部的標(biāo)簽就會(huì)（部分）繼承這個(gè)默認(rèn)的樣式信息，層級(jí)結(jié)構(gòu)代表了節(jié)點(diǎn)間的關(guān)系，那么就有了父子級(jí)的區(qū)別，也就有了繼承的關(guān)系。

那有的朋友就會(huì)問(wèn)了？現(xiàn)在的 CSS 不就是這樣的嗎？這不是默認(rèn)的行為？

CSS 確實(shí)如此，但剛開(kāi)始為 HTML 進(jìn)行修飾的樣式規(guī)則卻并非如此，CSS 只是在眾多規(guī)則中，最終成為標(biāo)準(zhǔn)的那一個(gè)。

歷史

1991 - 1993 年，各種瀏覽器相繼出現(xiàn)，但每個(gè)都實(shí)現(xiàn)了自己制定樣式規(guī)則，網(wǎng)頁(yè)呈現(xiàn)由用戶(hù)控制，樣式?jīng)]有統(tǒng)一的規(guī)定。

1993 年，Mosaic 瀏覽器采用增加新種類(lèi)的 HTML 標(biāo)簽實(shí)現(xiàn)樣式的表達(dá)，以滿足設(shè)計(jì)師的要求，之類(lèi)代表樣式的標(biāo)簽開(kāi)始出現(xiàn)。

1994 年，H?kon W Lie 提出層疊 HTML 樣式表（Cascading HTML Style Sheets），CSS 的雛形出現(xiàn)。

1995 年，W3C 建立，W3C 對(duì) CSS 很感興趣，為此專(zhuān)門(mén)組織了一次討論會(huì)。

1996 年，CSS 語(yǔ)法完成，發(fā)布了 CSS1.0 ，但由于當(dāng)時(shí)主流的瀏覽器并不支持（每家都有自己的樣式寫(xiě)法），并且當(dāng)時(shí)主流的方式為 HTML 的樣式標(biāo)簽，因此 CSS 等幾年后才流行起來(lái)。

1997 年，W3C 組織了專(zhuān)門(mén)管 CSS 的工作組。

1998 年，瀏覽器市場(chǎng)份額被微軟公司的 IE4 和網(wǎng)景公司的 Netscape Navigator 兩大瀏覽器巨頭所占據(jù)。IE4 率先實(shí)現(xiàn)了 CSS 1.0 但由于不重視，導(dǎo)致規(guī)范實(shí)現(xiàn)不完善，bug 很多。由于不同瀏覽器支持的標(biāo)準(zhǔn)不一致，網(wǎng)頁(yè)設(shè)計(jì)人員不得不為 IE 和 Netscape Navigator 分別設(shè)計(jì)一套網(wǎng)頁(yè)。民間設(shè)計(jì)人員團(tuán)體 網(wǎng)頁(yè)標(biāo)準(zhǔn)計(jì)劃(WaSP) 發(fā)動(dòng)水軍將 W3C 的建議宣揚(yáng)為標(biāo)準(zhǔn)，并批評(píng)還未加盟 W3C 標(biāo)準(zhǔn)的業(yè)界廠商。

1998 年，W3C 組織出版 CSS2.0 網(wǎng)頁(yè)標(biāo)準(zhǔn)計(jì)劃的 7 位成員成立了 CSS武士團(tuán)（CSS Samurai），指出 Opera 瀏覽器和 IE 瀏覽器在支持 CSS 方面存在的諸多問(wèn)題。Opera 公司著手解決了問(wèn)題，但微軟并未解決。他們同時(shí)也勸說(shuō)其他瀏覽器開(kāi)始支持 CSS 標(biāo)準(zhǔn)。

1999 年，W3C 開(kāi)始制定 CSS3 標(biāo)準(zhǔn)。

2003 年，Dave Shea 推出了一個(gè)名為 CSS禪意花園("CSS Zen Garden") 的站點(diǎn)，向人們展示出僅通過(guò)應(yīng)用不同頁(yè)面樣式規(guī)則，就可以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)藝術(shù)風(fēng)格的煥然一新。

2006 - 2009年， DIV+CSS 布局逐步取代缺乏靈活性的傳統(tǒng)表格布局，無(wú)表格網(wǎng)頁(yè)設(shè)計(jì)成為網(wǎng)頁(yè)內(nèi)容布局的主流方案。

2009 - 至今，CSS3 標(biāo)準(zhǔn)已部分公布，但仍未全部制訂完畢，瀏覽器廠商也逐步跟進(jìn)，W3C 官方將這些不同的特性分門(mén)別類(lèi)，稱(chēng)為 modules，不在沿用 CSS3.0 的版本號(hào)，而是將多帶帶的 module 分別命名，每個(gè) module 也有不同的版本號(hào)。

...

CSS 從標(biāo)準(zhǔn)制定，到最終有瀏覽器開(kāi)始實(shí)現(xiàn)，至少間隔了 5 年的時(shí)間，而 CSS 的上位也由民間組織推動(dòng)，到瀏覽器廠商最終采納。直到目前，我們還能在 HTML 中使用類(lèi)似之類(lèi)代表樣式的標(biāo)簽，也是歷史遺留下來(lái)的產(chǎn)物，但 HTML5 的推出，規(guī)范了 HTML 標(biāo)簽是作為網(wǎng)頁(yè)的結(jié)構(gòu)，CSS 作為網(wǎng)頁(yè)的樣式信息，因此那些代表樣式的標(biāo)簽已經(jīng)被規(guī)范所移除，我們也應(yīng)該少用甚至不用。

CSS 在眾多的樣式規(guī)則中脫穎而出，其實(shí)和 IE4 的成功有這很大的關(guān)系，IE 系列最先實(shí)現(xiàn)了 CSS1.0 標(biāo)準(zhǔn)，可以說(shuō)是在與 Netscape Navigator 戰(zhàn)爭(zhēng)中勝利的因素之一，甚至很多的 CSS3 屬性背后也有著 IE 的影子，但后來(lái) IE 系列的落寞很大程度上是因?yàn)樗牟蛔鳛椤?/p> 語(yǔ)法 or 結(jié)構(gòu)

一條 CSS 規(guī)則的結(jié)構(gòu)如下：

┌─────── 選擇規(guī)則 ──────┐   ┌────────── 聲明塊 ──────────┐
p + p > span:first-child    {
                                ┌──────  CSS 屬性 ───────┐
                                font-size   : 10px       ;
                                └─ 屬性名 ─┘ └─ 屬性值 ─┘
                            }

由兩部分組成，選擇器與聲明塊。

選擇規(guī)則：用于匹配具體 HTML 中符合要求的標(biāo)簽

聲明塊：用于設(shè)置符合要求標(biāo)簽的樣式

一條選擇規(guī)則有兩部分組成，選擇器與連接符，上面例子中，p、span、:first-child 屬于選擇器，而 +、> 這些符號(hào)屬于連接符。

一個(gè)聲明塊由多條 CSS 屬性組成，屬性分為兩部分，屬性名與屬性值，以 : 分隔，以 ; 結(jié)尾，一條屬性規(guī)定了標(biāo)簽的一個(gè)樣式。

選擇規(guī)則

選擇規(guī)則，意如其名，用于選擇 HTML 文檔中的標(biāo)簽，那么如何進(jìn)行選擇的呢？選擇規(guī)則分為兩部分，我們分開(kāi)介紹

選擇器

選擇器用于選擇 HTML 頁(yè)面中存在的標(biāo)簽。選擇器分為幾大類(lèi)，如下：

選擇器類(lèi)型	含義
元素選擇器（elementname）	選擇對(duì)應(yīng)標(biāo)簽
類(lèi)選擇器（.classname）	選取具有對(duì)應(yīng)類(lèi)名的標(biāo)簽
ID 選擇器（#idname）	選取具有對(duì)應(yīng) ID 的標(biāo)簽
通配選擇器（*）	選取所有標(biāo)簽
屬性選擇器（[屬性名=值]）	選取有相應(yīng)規(guī)則屬性的標(biāo)簽
偽類(lèi)選擇器	選取偽類(lèi)規(guī)定的標(biāo)簽

屬性選擇器有多種寫(xiě)法，如下：

寫(xiě)法	含義
[attr]	選取帶 attr 屬性的標(biāo)簽
[attr=value]	選取 attr 屬性值為 value 的標(biāo)簽
[attr~=value]	選取 attr 屬性中有 value 單詞（單詞不與其他字母相連）存在的標(biāo)簽
[attr\|=value]	選取 attr 屬性為 value 或以 value- 開(kāi)頭的標(biāo)簽
[attr^=value]	選取 attr 屬性以 value 開(kāi)頭的標(biāo)簽
[attr$=value]	選取 attr 屬性以 value 結(jié)尾的標(biāo)簽
*[attr=value]**	選取 attr 屬性中含有 value 的標(biāo)簽

注：屬性選擇器寫(xiě)法，如 [attr=value] 其后都可以跟 i，比如 [attr=value i] 代表在匹配時(shí)，忽略 value 的大小寫(xiě)。

常用偽類(lèi)，如下

寫(xiě)法	含義
:active	選中被用戶(hù)激活的標(biāo)簽
:hover	選中被鼠標(biāo)懸浮的標(biāo)簽
:visited	選中已訪問(wèn)過(guò)的鏈接
:focus	選中獲取到焦點(diǎn)的標(biāo)簽
:first-child	選中一組兄弟標(biāo)簽中的第一個(gè)標(biāo)簽
:last-child	選中一組兄弟標(biāo)簽中的最后一個(gè)標(biāo)簽
:first-of-type	選中一組兄弟標(biāo)簽中其類(lèi)型的第一個(gè)標(biāo)簽
:last-of-type	選中一組兄弟標(biāo)簽中其類(lèi)型的最后一個(gè)標(biāo)簽
:not(X)	選中不被 X 選擇器選中的所有標(biāo)簽
:nth-child(an+b)	a b為固定值，n 為任意自然數(shù)，選中一組兄弟標(biāo)簽中第 an+b 個(gè)元素
:nth-last-child(an+b)	同上規(guī)則，從后往前匹配
:nth-of-type(an+b)	同上規(guī)則，從前往后找，匹配相同類(lèi)型的標(biāo)簽
:nth-last-of-type(an+b)	同上規(guī)則，從后往前匹配
:only-child	如果父標(biāo)簽中只有一個(gè)子元素則選中該子標(biāo)簽
:only-of-type	如果父標(biāo)簽中只有一個(gè)該類(lèi)型的子元素則選中該子標(biāo)簽

連接符（符號(hào)用引號(hào)引起）

連接符規(guī)定了選擇器該如何進(jìn)行組合，為了方便解釋?zhuān)視?huì)將符號(hào)取一個(gè)名字，最終的選擇規(guī)則代表的含義只需按順序從前往后讀即可。

符號(hào)	名字	含義
""（無(wú)）	并且	選擇器疊加
","	或者	選擇器共用
" "（空格）	內(nèi)	后代選擇
">"	內(nèi)第一級(jí)	子元素選擇
"+"	之后的第一個(gè)	相鄰兄弟選擇
"~"	之后的所有	兄弟選擇

給幾個(gè)例子

p.class1

p,div

p .class1

p > .class1

p + .class1

p ~ .class1

我們順起來(lái)念：

選中 p 并且?guī)в?class1 類(lèi)名的標(biāo)簽。

選中 p 標(biāo)簽或者 div 標(biāo)簽。

選中 p 標(biāo)簽內(nèi)的帶有 class 類(lèi)名的標(biāo)簽。

選中 p 標(biāo)簽內(nèi)第一級(jí)帶有 class 類(lèi)名的標(biāo)簽。

選中 p 標(biāo)簽之后的第一個(gè)帶有 class 類(lèi)名的標(biāo)簽。

選中 p 標(biāo)簽之后的所有帶有 class 類(lèi)名的標(biāo)簽。

針對(duì)于復(fù)雜的選擇規(guī)則的編寫(xiě)，比如在 bootstrap 中有這樣一段：

.btn-group > .btn-group:not(:first-child):not(:last-of-type) > .btn {
  border-radius: 0;
}

代表的意義是什么呢？

按照順序念：選中帶有 btn-group 類(lèi)名標(biāo)簽內(nèi)第一級(jí)帶有 btn-group 類(lèi)名并且不是第一個(gè)子元素并且不是最后一個(gè)子元素標(biāo)簽內(nèi)第一級(jí)帶有 btn 類(lèi)名的標(biāo)簽。

對(duì)應(yīng)的 html 如下：

選中的標(biāo)簽為按鈕2/3/4。

我們從該條規(guī)則的意義來(lái)理解這條規(guī)則：btn-group 中的 btn-group 下的 btn 不應(yīng)該有圓角（在中間時(shí)）。因?yàn)檎５陌粹o都是帶圓角的，而放在按鈕組中的按鈕其實(shí)只要左右兩邊的按鈕帶上圓角就好，這時(shí)候就需要通過(guò)特殊的手段來(lái)吧這些要去除圓角的元素給選擇，并去掉圓角。

接著我們?cè)诳次覀兎g出來(lái)的內(nèi)容，是不是不那么繞了呢？

最后在提一段 bootstrap 中的樣式規(guī)則，大家一起翻譯翻譯吧

.btn-group > .btn-group:last-of-type:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

選擇器的內(nèi)容到此為止，接下來(lái)就要談?wù)劼暶鲏K中的 CSS 屬性了。

樣式類(lèi)別（屬性）

CSS 中樣式分很多種，按照樣式效果進(jìn)行區(qū)別，大致可以分為如下幾類(lèi)

大類(lèi)	作用	代表屬性
字體	控制字體的顯示效果	font-* color text-transform text-decoration text-shadow
文字排版	控制文字的排版	text-align text-align-last text-indent text-overflow line-height word-spacing letter-spacing
背景	控制元素背景顯示	background-*
布局	控制元素的布局行為	flex 系列屬性 grid 系列屬性
文檔流相關(guān)	控制元素在文檔流中的位置	position top left bottom right z-index float clear
列表	控制列表的行為	list-*
盒模型	控制元素大小	width height padding border margin box-sizing
動(dòng)畫(huà) & 過(guò)渡	控制元素動(dòng)畫(huà)	transition-* transform animation-* @keyframes

該篇僅介紹 CSS 是什么，而不解釋 CSS 有什么，所以不過(guò)于深究這些屬性的具體內(nèi)容，可以通過(guò)查看 CSS參考來(lái)了解。

屬性的繼承

開(kāi)篇我們就提到了，CSS 為層疊樣式表，層疊代表的意思為屬性的繼承。

這個(gè)繼承可以簡(jiǎn)單的總結(jié)為一句話：

父級(jí)標(biāo)簽的字體樣式和文章排版樣式會(huì)被子標(biāo)簽所繼承，也就是說(shuō)子標(biāo)簽不用寫(xiě)這些屬性，就擁有了這些屬性。

幾個(gè)特殊值

CSS 中有幾個(gè)特殊的屬性值，需要特別關(guān)注一下：

unset - 如果該屬性為繼承屬性則使用繼承值，不是則使用瀏覽器默認(rèn)值

initial - 使用初始化的值，也就是瀏覽器默認(rèn)值

inherit - 使用繼承值

權(quán)重

由于相同的標(biāo)簽可以由不同的選擇規(guī)則所選中，那么這時(shí)候就出現(xiàn)了一個(gè)情況，如果有多個(gè)選擇規(guī)則同時(shí)選中了同一個(gè)元素，并且同時(shí)設(shè)置了相同屬性，那么標(biāo)簽最終是要按照哪條規(guī)則定義的屬性來(lái)顯示？

不同 CSS 規(guī)則對(duì)同一個(gè)標(biāo)簽設(shè)置了相同屬性，CSS 選擇規(guī)則權(quán)重最高的規(guī)則會(huì)覆蓋權(quán)重低的樣式設(shè)置。

何為權(quán)重，經(jīng)過(guò)上面的介紹，CSS 設(shè)置標(biāo)簽的樣式有如下幾種

直接寫(xiě)在標(biāo)簽 style 屬性上

ID 選擇器

類(lèi)名選擇器

偽類(lèi)

標(biāo)簽選擇器

通配符

從上到下，選擇器的權(quán)重依次遞減，就像是同樣是一張紙幣，100 的紙幣代表的比 10 塊的紙幣大，但是與紙幣不同的是，權(quán)重高的永遠(yuǎn)比權(quán)重低的優(yōu)先級(jí)要高，不管低權(quán)重的選擇器有幾個(gè)。

除去 style 的方式我們用一個(gè)數(shù)組來(lái)代表選擇規(guī)則的權(quán)重。

[0, 0, 0, 0, 0]

從左到右為：ID 選擇器、類(lèi)名選擇器、偽類(lèi)、標(biāo)簽選擇器、通配符，數(shù)組的初始值全為 0 ，我們可以變看選擇規(guī)則來(lái)確定最終數(shù)組，比如那個(gè)很復(fù)雜的 btn 選擇：

.btn-group > .btn-group:not(:first-child):not(:last-of-type) > .btn {
  border-radius: 0;
}

從左到右，每出現(xiàn)一個(gè)選擇器，就將對(duì)應(yīng)的數(shù)組內(nèi)的數(shù)組加一，那么上條規(guī)則最終的數(shù)組如下：

[0, 3, 2, 0, 0]

這時(shí)，有的朋友可能會(huì)問(wèn)了，偽類(lèi)選擇有 4 個(gè)啊，怎么是 2 ？這里需要注意的是：:not 偽類(lèi)僅帶有取反的意思，并不增加權(quán)重。

那么權(quán)重該如何比較？

簡(jiǎn)單的來(lái)說(shuō)，從前往后比，誰(shuí)比誰(shuí)先大，誰(shuí)的權(quán)重高。相信寫(xiě)一段比較程序大家就了解了：

function compare(weight1, weight2){
    for(let i = 0; i < 5; i++){
        if(weight1[i] !== weight2[i]){
            if(weight1[i] > weight2[i]){
                console.log("參一權(quán)重大");
            }else{
                console.log("參二權(quán)重大");
            }
            return;
        }
        
    }
}

那么 style 所規(guī)定的樣式權(quán)重如何？

style 樣式所規(guī)定的權(quán)重，比 ID 選擇器 的權(quán)重還要高。

那么我們想要在 CSS 文件中修改 style 所規(guī)定的樣式該怎么辦？

使用 !important 修飾特定的樣即可。如下所示

p {
    color: red !important;
}

那么 p 標(biāo)簽的字體顏色即為紅色，即使設(shè)置了 style 也沒(méi)用。

總結(jié)一下：權(quán)重等級(jí)由高到低為：!important > style > 選擇規(guī)則。就像是老大哥說(shuō)東小弟不敢說(shuō)西，權(quán)重也是絕對(duì)服從上一級(jí)的。

因此為了避免出現(xiàn)尷尬的狀況，請(qǐng)慎重使用 !important。

預(yù)編譯

CSS 發(fā)展到現(xiàn)在，人們發(fā)現(xiàn) CSS 雖然含有層疊的含義，但是寫(xiě)法卻是一維的，就比如文檔結(jié)構(gòu)如下的一個(gè)網(wǎng)頁(yè)：


    這是一段文字

我們要在 article，p 標(biāo)簽上設(shè)置樣式，看起來(lái)是這樣的：

article {
    font-size: 14px;
}

article p {
    color: red;
}

由于樣式規(guī)則按照一條一條的形式進(jìn)行編寫(xiě)，看起開(kāi)就是一維，標(biāo)簽的層級(jí)結(jié)構(gòu)不能在其中體現(xiàn)，如果這樣寫(xiě)那就好了：

article {
    font-size: 14px;
    p {
        color: red;
    }
}

從樣式編寫(xiě)上就說(shuō)明了層級(jí)結(jié)構(gòu)，p 標(biāo)簽所繼承的樣式明了，但是瀏覽器又僅能識(shí)別一維的樣式編寫(xiě)，那該如何讓瀏覽器認(rèn)識(shí)該結(jié)構(gòu)呢？

預(yù)編譯器因運(yùn)而生，常用的 css 預(yù)編譯器有：sass、less、stylus等，這些預(yù)編譯器需要特定的語(yǔ)法，但都支持二維的寫(xiě)法。

那么這些個(gè)預(yù)編譯干了什么？

很簡(jiǎn)單的一句話，將符合預(yù)編譯器語(yǔ)法的文件轉(zhuǎn)化為 css 文件。

同樣的這些預(yù)編譯器的語(yǔ)法，這里不過(guò)多介紹，提供幾個(gè)網(wǎng)站供大家查閱：

sass/scss

less

stylus

CSS Modules 的看法

我是在 2019 年寫(xiě)下這篇文章，為何要特地的聲明時(shí)間，是因?yàn)橐粋€(gè)東西的出現(xiàn)：CSS Modules，我們需要好好來(lái)了解了解。

何為 CSS Modules ，官方解釋如下：

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

翻譯過(guò)來(lái)就是：

CSS 的類(lèi)名和動(dòng)畫(huà)名字都在一個(gè)命名空間下。

不懂？寫(xiě)個(gè)例子。

以下為偽源碼：

// test.css
.box{
    color:red;
}

import style from "test.css"

function Test(){
    return ()
}

以下為偽輸出：

_styles__box_34682763478 就是在加了命名空間后的類(lèi)名，這樣構(gòu)建出的代碼就不會(huì)出現(xiàn)相同類(lèi)名被覆蓋的問(wèn)題。

總的來(lái)說(shuō)，CSS Modules 做了一件時(shí)，混淆了 class 類(lèi)名、id 和動(dòng)畫(huà)名。

這時(shí)就有一些開(kāi)發(fā)站出來(lái)說(shuō)，這個(gè)東西好啊，我再也不用去想類(lèi)名該如何取才能不導(dǎo)致沖突了。冷靜下來(lái)先考慮這幾個(gè)問(wèn)題：

雖然不會(huì)沖突了，但如果你想覆蓋類(lèi)名該怎么辦？

是否能接受編譯慢的問(wèn)題？

樣式名會(huì)隨著文件的位置或文件內(nèi)容改變，是否能接受這種變化？

頁(yè)面上是否需要用到大量 JavaScript DOM API？如果是，那么通過(guò)樣式名選取變的不可靠。

當(dāng)使用了 CSS Modules 后項(xiàng)目中是否出現(xiàn)了極多的 :global 如果是，那要仔細(xì)思考下，不用 CSS Modules 成本是否更低？

以下是問(wèn)題對(duì)應(yīng)的一些場(chǎng)景

問(wèn)題一：你引用了團(tuán)隊(duì)中其他人寫(xiě)的組件，但需要你自己修改（覆蓋）一些樣式，而其他人也是用 CSS Modules 編寫(xiě)樣式，因此他的類(lèi)名是不固定的，你該如何去覆蓋這個(gè)組件中標(biāo)簽的樣式？

通知組件編寫(xiě)者修改樣式？要是通用組件咋辦？

讓他用固定樣式？那用 CSS Modules 的意義在于哪？

問(wèn)題三四：當(dāng)你程序需要使用 DOM API 但通過(guò) CSS Modules 生成的樣式名會(huì)隨著文件的位置或內(nèi)容改變，這樣程序就變得不可靠，當(dāng)然這個(gè)問(wèn)題有辦法解決

js 中也用 CSS Modules 的命名，只不過(guò)調(diào)試變得些許困難

js 中使用的樣式名與 CSS Modules 進(jìn)行區(qū)分，js 和 CSS Modules 使用兩套樣式多帶帶的樣式

那么接下來(lái)說(shuō)說(shuō)我的使用體驗(yàn)，或者說(shuō)我覺(jué)得好的使用體驗(yàn)

項(xiàng)目中 CSS Modules 和原始的 CSS 一同使用。

CSS Modules 僅使用在組件內(nèi)部，項(xiàng)目中依然使用公共樣式。

CSS Modules 僅使用在一些與結(jié)構(gòu)無(wú)關(guān)的但又不好命名的標(biāo)簽上，這些標(biāo)簽一般也不會(huì)被 js 所選擇。

CSS Modules 混淆采用和文件位置相關(guān)的命名空間產(chǎn)生方式，而不根據(jù)文件內(nèi)容。

一旦某個(gè)樣式是跨組件通用就不用 CSS Modules ，通過(guò)項(xiàng)目規(guī)定的命名空間在原始 CSS 文件中定義。

開(kāi)發(fā) UI 庫(kù)或公共組件，不用 CSS Modules。

總的來(lái)說(shuō)就是一個(gè)原則，CSS Modules 用在非共用，無(wú)所謂命名以及非跨組件通用的標(biāo)簽上，這些標(biāo)簽可以認(rèn)為是組件的內(nèi)部狀態(tài)，不會(huì)被外部影響或修改。

也不知道多年以后 CSS Modules 是否真的解決了編譯慢的問(wèn)題（至少我的電腦上是），CSS Modules 原理上仍是傳統(tǒng)的 CSS 編寫(xiě)方式，只不過(guò)它混淆了名稱(chēng)，并添加了映射，但是以后的發(fā)展會(huì)如何呢？我不知道，但我會(huì)持續(xù)的關(guān)注它。

總結(jié)

慣例以問(wèn)句開(kāi)篇，用問(wèn)句來(lái)結(jié)尾

CSS 的層疊體現(xiàn)在哪？

CSS 選擇規(guī)則分為那兩部分，每部分都如何組成？

列一列選擇器，并分個(gè)類(lèi)？

常見(jiàn)屬性都有哪些？

預(yù)編譯器是干什么用的？

CSS Modules 是什么？

談?wù)剬?duì) CSS Modules 的看法吧。

最后，其實(shí)本篇還想談?wù)劜季趾臀臋n流的內(nèi)容，但篇幅過(guò)長(zhǎng)，也涉及到了 HTML ，所以就打算將布局多帶帶出來(lái)，以后會(huì)有如何進(jìn)行網(wǎng)頁(yè)布局的單篇，已經(jīng)記錄，希望大家持續(xù)關(guān)注。